resizing logo in mobile

Hi,

I'm trying to make it so that when I view my site on a mobile phone, it doesn't cut the logo image in half.

On my desktop, when I re-size the browser by dragging the sides of the browser in to be about the width of a cell phone, it looks fine and it re-sizes appropriately (because I made the max-width be 80% for the logo in my custom CSS). But when I view the site on an actual smart phone, the logo is still too large and half of it is falling off the screen.

Any recommendations?

Here's the site: http://9a2.660.myftpupload.com/

Thanks.

 

Hello,

I have checked your site in iPhone but not found such issue. Please do let me know in which device you are getting this issue.

Thanks & Regards
Nitesh Raghuwanshi

 

Good news: the logo issue has gone away. Perhaps it was just a temporary problem, I am not sure.

Bad news: the client noticed that there is another issue with the images in the mobile view: the front-page featured content areas are having their images distorted. This is most apparent if you look at the image of the woman with black hair (third image) using your mobile phone. On a phone, her face looks very long, as if the image has been made too narrow without changing its height.

Any suggestions on how to fix this?

 

Hello,

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){
.feature-content .feature-content-inner img {
height: auto;
}
}
 

This will solve your issue.

 

Thanks!