Mobile Logo Display sized too small

  • Resolved bczegeny

    (@bczegeny)


    9 years ago

    Hey Ben,

    I’m having some issued with tweaks I made to the sizing of the logo on mobile. Everything is fine until you get on a device smaller then 800px. I have tried to use css targeted at that screen size but cant seem to get the logo to look like it does on the desktop version.

    If you could take a look at http://www.momentsafterdark.ca On a mobile device iphone 5 or less is where the problem occurs. Maybe you can help me figure out what I’m doing wrong. The logo should be centered and but right now it is super small and floating left.

    Thanks for all your continued support and responses! You rock!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author Ben Sibley

    (@bensibley)

    9 years ago

    That’s a strange one! I was able to recreate it on Safari on my laptop as well. It looks like it doesn’t like the use of percentages in the max-width and max-height values. If you define the max-width/height with pixels or ems instead, it will stop appearing tiny. I was able to try and verify this works while debugging with Safari.

    Also, I noticed there’s an undefined function in some inline JS on the page: http://pics.competethemes.com/image/3d3x3O0q1h02

    Not sure if that’s causing any problems at the moment, but it may break something down the line.

    Thread Starter bczegeny

    (@bczegeny)

    9 years ago

    Hmm not sure what the undefined function is? I will have to look into that further. Ok I put in a pixel width and the logo is the right size but now not centered. Even though I have 

    .full-width .site-title {
  text-align: center;
}

    One other thing that is buggy is the way the logo doesn’t disapear when you use the mobile menu. Not sure what is messing with that

    UPDATE: Ok got it to center but need the logo to not be displayed when they click the menu button.

    Theme Author Ben Sibley

    (@bensibley)

    9 years ago

    Okay cool. The following will remove the logo whenever the mobile menu is opened:

    .site-header.toggled .title-info {
  display: none;
}
    Thread Starter bczegeny

    (@bczegeny)

    9 years ago

    awesome thanks!

    Theme Author Ben Sibley

    (@bensibley)

    9 years ago

    You’re welcome 🙂

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Mobile Logo Display sized too small’ is closed to new replies.