›
Before you ask please READ THIS

logo appears stretched on mobile

nf_michelanf_michela
edited February 2014 in Superior Posts: 31
hi,
I'm setting up the superior theme in my website: http://www.culinaria .it/index.php
but on mobile (iphone 4s) the logo appears stretched/condensed, why? I checked theme documentation but it seems that "Here you upload logo for your blog or use text one. Uploaded logo will be resized by CSS to fit layout in some cases."
what is wrong?
thanks,
michela

Comments

  • AirAir
    Posts: 10,970
    Hello

    It is strange, but I think it is something to do with your logo ratio(width to height).
    However I have tried using your logo on my test site and I couldn't get same result as on your site, with stretched logo. Also I can't recreate it in desktop broswer or emulator.

    Maybe you did something special to your site that I might not see?

    With regards.
  • MakeMeCardsMakeMeCards
    edited February 2014 Posts: 25
    I am having this same issue as well. Clean install, haven't touched any code and the logo is a bit distorted on mobile. http://wpdev.ppsbend.com
    Post edited by MakeMeCards on
  • AirAir
    Posts: 10,970
    I am investigating this case. I will respond here when I will find out what is going on, cause now even I spend few hours on it I still have no clue.

    With regards.
  • AirAir
    Posts: 10,970
    OK I found solution

    Use this custom CSS 
    .highresdisplay #logo img {
        height: auto !important;
    }
    And I will fix it in next version so such CSS won't be needed.

    Thanks for pointing this out!

    With regards.
  • nf_michelanf_michela
    Posts: 31
    Thank you Air, now it works!
  • portraitdecomediensportraitdecomediens
    Posts: 28
    It doesn't works for me :(
    The custom CSS have to be only add on the part "custom css" that's right ?

    The logo is still stretched on iPhone...

    Thanks a lot !

    Antoine
  • AirAir
    Posts: 10,970
    Show me live link, so I could see how it looks.

    With regards.
  • portraitdecomediensportraitdecomediens
    Posts: 28
    Thanks a lot !

    www.portraitdecomediens.fr
  • AirAir
    Posts: 10,970
    In your case try 

    .highresdisplay #logo img {
        width: auto !important;
    }
    I will have to test it with different ratio images and make better solution for it.

    With regards.
  • portraitdecomediensportraitdecomediens
    Posts: 28
    I'm sorry but it doesn't works... it's really weird :(
  • portraitdecomediensportraitdecomediens
    Posts: 28
    Ok it works. I've just decreased the size of the retina logo and it seems good now :)
  • AirAir
    Posts: 10,970
    That is good. I checked and indeed it works now.

    With regards.
  • portraitdecomediensportraitdecomediens
    Posts: 28
    Yes it's perfect, i've seen that in the 1.6.1 update. but it's very small now... Do you a know a css tricks which can increase his size ?

    Thanks a lot !!

    Antoine
  • AirAir
    Posts: 10,970
    You can use previous CSS but with specific sizes: 
    .highresdisplay #logo img {
        width: 100px !important;
        height: 50px !important;
    }
    With regards.
  • portraitdecomediensportraitdecomediens
    Posts: 28
    The luck isn't with me :( it still looks stretched... even if i change value in order to make the good proportions. For now, only the second choice works :

    ".highresdisplay #logo img {
    width: auto !important;
    }

    And my logo is tinyyyy

    Don't hesitate to tell me if you find the solution :)

    Thanks a lot for your help
  • AirAir
    edited February 2014 Posts: 10,970
    I have checked and you didn't add CSS I gave you in last post(and you have to adjust these example values I gave you to your logo).

    With regards.
    Post edited by Air on
  • portraitdecomediensportraitdecomediens
    Posts: 28
    yes I remove it because its looked stretched. If you want i can put it back on for you today. Check that :)

    Thanks, Antoine
  • portraitdecomediensportraitdecomediens
    Posts: 28
    Done.
  • portraitdecomediensportraitdecomediens
    Posts: 28
    still stretched :(
    As soon as you'll check it, i'll remove it because it's not beautiful...
  • AirAir
    Posts: 10,970
    O man... It was sample values
    Air said: and you have to adjust these example values I gave you to your logo
    With regards.
  • portraitdecomediensportraitdecomediens
    Posts: 28
    I know… But like i said, even if i changed the values in order to keep the good proportions it failed.. So i thought that i had to use the specific values you gave me (so sample value). Now i've tried one of the solutions, it seems to be acceptable… (you can check it if you want)

    Thanks for your help :)
  • AirAir
    Posts: 10,970
    Very nice:-)

    With regards.
Sign In or Register to comment.