Logo cropped in ipad

[loreabagaz]

Hi!
I am currently customizing my blog using OldCar and I noticed that the logo was cropped when entering the URL from an Android device Iphone, or Ipad (when viewed HORIZONTALLY). The problem with Android and Iphone has been solved using the CSS code ” .responsive-logo {background-size:auto 100%;}”. However the Retina(HiDPI) LOGO remains cropped on its right side when viewed in ipad (Ios7).
Could you help me fix this?
Thank you 🙂

The URL is: http://dermatologia-bagazgoitia.com/category/dermatologia-pediatrica/

[FocuxTheme Support]

Hi

This is the logo which is cropped http://dermatologia-bagazgoitia.com/wp-content/uploads/2013/12/Logo-tricolor-doble5-300×81.png right?
The max width is limited 270px ,but your logo width is 300px, so is it possible to reduce it to 270px?

Thanks

[loreabagaz]

Hi!!!

Yes, that is the cropped logo, but that is the one I uploaded for “Retina(HiDPI) LOGO” which, according to your theme should be “double size”. It is 548px x 148px (according to pixler) , exactly two times the custom logo.

[loreabagaz]

However, I resized it to maximum width of 270 and it’s still cropped when viewed on IPad.
Thanks 🙂

[FocuxTheme Support]

OK, try to add the following CSS into “OldCar options > Custom code > CSS code”

h1.logo a {background-size:100% auto;}

[loreabagaz]

Thank you, but still cropped in Ipad…
I added this CSS code to the one I previously had, one in each row, is this correct?

.responsive-logo {background-size:auto 100%;}
h1.logo a {background-size:100% auto;}

Looking forward to your answer…
L.

[Musama]

Hi actually .responsive-logo {background-size:auto 100%;}
it’s the right one is this working. if not try to add? responsive-logo {background-size:auto 100% !important;}

[loreabagaz]

.responsive-logo {background-size:auto 100%;} was working from the begginning, but only for android. The logo in Ipad was still cropped, and it IS still cropped.

I am sorry, I do not understand properly what you mean.

Should I writte:
responsive-logo {background-size:auto 100% !important;}
h1.logo a {background-size:100% auto;}

or

.responsive-logo {background-size:auto 100%;}
responsive-logo {background-size:auto 100% !important;}

For the moment, I have fixed it making a new“Retina(HiDPI) LOGO” , which is 200 px wide.

Thank you 🙂
L.

[Musama]

Great if you have any question you’re welcome 🙂

[jakubik]

Hi,

yeah, in fact I have a question… I have the same problem… I’v tried to use all CSS tricks, but all the time my logo was cropped. Finally I had to upload normal logo (small one) as the Retina Logo. What should we do to be able to upload hires logo for retinas that is not cropped?

[FocuxTheme Support]

Hi

Please let me know your website link that I can check it with developer tool.

Thanks

[Author]

Posts