Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • September 5, 2014 at 11:49 pm #314222
    esemmel

    Hi. Everytime I upload an image on a website it runs into (under) the little menu icon on my iphone when I test it out to see how it looks.

    Is there a certain size that the logo must be to get it to look right?

    In the enfold demo theme it is fine. The enfold logo is seen sharply and the little bulleted list icon for the collapsed menu is on the right and not hiding part of the logo.

    As an example – http://www.ethansemmel.com

    thanks

    September 6, 2014 at 4:54 am #314345
    Josue

    Hey!

    Try selecting this option in Enfold > Header Layout > Mobile Menu:

    Cheers!
    Josue

    September 6, 2014 at 8:58 pm #314571
    esemmel

    HI. Sorry to say that didn’t do anything.

    I did find this css code and put it in for another site of mine:

    @media only screen and (max-width: 480px) {
    .responsive .logo a, .responsive .logo img {
    max-width: 90%;
    height: auto !important;
    float: left;
    margin-top: 8px!important;
    }}

    That worked and when the phone is held normally (vertically) but when I twist the phone to horizontal, the logo gets bigger and the same issue happens.

    September 7, 2014 at 2:09 am #314654
    Josue

    Hey!

    Try adding this code to the Quick CSS:

    @media only screen and (max-width: 479px) {
    .responsive .logo{
        top: 15px;
        position: relative;
    }
    .responsive .logo img{
        width: 220px !important;
        height: auto !important;
    }
}

    Cheers! 
    Josue

    September 7, 2014 at 3:58 am #314665
    esemmel

    Hi, I tried replacing the code i pasted above with yours. It did the same thing. It fixed the logo on an iphone in vertical postion, but when I twist the phone to horizontal position, the logo all of a sudden changes to a larger size and is overlapped by the collapsed menu icon.

    September 7, 2014 at 5:24 am #314673
    Josue

    Hey!

    Try changing the code to:

    @media only screen and (max-width: 767px) {
    .responsive .logo{
        top: 15px;
        position: relative;
    }
    .responsive .logo img{
        width: 220px !important;
        height: auto !important;
    }
}

    Cheers!
    Josue

    September 8, 2014 at 1:46 pm #315034
    esemmel

    Bingo!. Worked.

    Thank you very much.

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘logo size on mobile’ is closed to new replies.