Icon distored on iphone

[mstookey]

Hi,
I can’t figure out why my logo is distorted on mobile devices. Even when I add a proportional height it doesn’t scale correctly. Thanks for any suggestions.

[mstookey]

Subject should be… “logo distorted…” thx

[Kyle – SUPPORT]

Hi

You need to set the logo height in the theme options

– Kyle

[mstookey]

Hi Kyle,
That doesn’t work either. I’ve inserted a proportional height and now it’s stretched vertically in my browser and vertically on the mobile version. Neither one is displaying correctly. It does display correctly in the “theme options” header control panel. 300 x 79 is how it should display but when I add the 79 (in one or both of the height fields) it appears distorted.

[David Martin – Support]

Hi,

Please test adding this CSS to your Theme Options => Custom CSS:

@media only screen and (max-width: 991px) {
#logo img {
    max-height: initial!important;
}
}

Thanks.

[mstookey]

Here is a link to the image used & how it should display (although half the size)
http://69.42.84.209/~dotsdevi/wp-content/uploads/2013/10/dots_tag7B.png

[David Martin – Support]

Hi,

Please see above response.

Thanks.

[mstookey]

Hi David,

Thanks, that worked! I had to remove the height but when only the width is specified, it’s fine. Thank you!

[David Martin – Support]

Great, no problem.

Thanks.

[mstookey]

This was fine in firefox but not good in Safari or Chrome. Not sure what the problem is — when I don’t specify a height (logo should be 300×79) it looks fine in Firefox but majorly smushed in Safari. When I add the 70 to height it’s less distorted, but still distorted – in Firefox as well.

The first screenshot is safari with no height specified, width = 300. The second screenshot is height specified = 79 (it looks like this in safari & firefox) and the third is how it should appear. It looks ok in firefox with only width specified. I can’t make it appear correctly across all browsers.

Attachments:

You must be logged in to view attached files.

[mstookey]

I added css:

#logo img {
max-height:none;
}

and think I fixed the issue.

[Mohammad – SUPPORT]

Hi,
Glad 🙂 to know this.
Mohammad