slider scaling

is there a way to make the slider scale proportionatly?

if you look at http://www.smartawordpress.com

as the screen re-sizes the logo on the slider gets compressed and out of shape

my client has VERY fussy graphic designer and he does nor want to logo to appear out of shape at any time

is there a way to fix this

 

Hello,

Greetings from InkThemes!

Sorry, but I am unable to check your site.

Here's the screenshot of what I get when I use to click on your provided link.



Looking forward to your reply.

Thanks & Regards!
Priyanka
InkThemes.com

 

so sorry - I forgot the password

it is

aayt2015

 

Hello,

Greetings from InkThemes!

Please paste the code given below in Custom CSS section (Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

Code:

@media only screen and (max-width: 480px){
.header_wrapper .logo img {
  margin-top: -401px !important;
  margin-left: -22px !important;
}
  .flexslider .slides img {
    margin-top: 52px !important;
    width: 527px !important;
    margin-left: -59px !important;
}
}

Hope it will resolve your issue

Thanks & Regards!
Priyanka
InkThemes.com

 

hello

this did not make any difference that I could notice

the logo image on the slider gets distorted as the screen gets smaller

 

ok - I have made some progress

I had
ul.slides li a img {
height: 705px !important;
}

to resize the height of the image in my custom css

now that I have removed it the logo does not compress

only my problem now is that the menu starts to cover the logo at smaller screen sizes (like iPad size)

is there some css code that would keep the logo image under the menu at all times?

 

Hi,

Greetings from InkThemes,

I visited the URL provided by you and I noticed that you have applied a lot of (some non-required) custom CSS to your website. Anyways, that's not a big issue.

Here I am providing you a CSS code, Please paste the code given below in Custom CSS section
(Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

Code:

@media only screen and (max-width: 480px) and (min-width: 401px){ 
  .slider-container {
    height: 375px !important;
}}
@media only screen and (max-width: 767px) and (min-width: 481px){
.header {
   margin-top:0px !important;
}
.flexslider .slides img {
       margin-top: 179px !important;
}
.slider-container {
   height: 467px !important;
}}
@media only screen and (max-width: 960px) and (min-width: 768px){
.flexslider .slides img {
   margin-top: 148px !important;
}}
@media only screen and (max-width: 1140px) and (min-width: 961px){
.flexslider .slides img {
    margin-top: 83px !important;
}}
@media only screen and (max-width: 1400px) and (min-width: 1141px){
.flexslider .slides img {
    margin-top: 54px !important;
}}

This will help you in reaching perfection.

However, I know that still you would be left with some issues. No problem, we are here to assist you always.

Should you need any further assistance, don't hesitate to contact us.

Thanks & Regards!
Nitin
InkThemes.com

 

brilliant - thank you !