Mobile site logo

  • I’m using the following CSS code to use a responsive logo on my page:

    .logo {
    max-width: 45% !important;
    max-height: none !important;
    }

    It works great on desktop but the logo is really small on mobile and I’d like to display it on smartphones with 100% width.
    How can I achieve this while keeping desktop as it is?

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

    (@bensibley)

    Adding your code into a media query like this should work well:

    @media all and (min-width: 800px) {

  .logo {
    max-width: 45% !important;
    max-height: none !important;
  }
}

    Now that code will only affect the logo if the screen is 800px or wider, so it won’t make it small on mobile devices.

    Thread Starter mmirlach

    (@mmirlach)

    I still had some issues with the main menu breaking into a seperate line and a small mobile logo but was able to solve this by giving different px sizes depending on the screen width:

    @media all and (min-width: 800px) {

  .logo {
    max-width: 400px !important;
    max-height: none !important;
  }
}

@media all and (max-width: 800px) {

  .logo {
    max-width: 250px !important;
    max-height: none !important;
  }
}
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Mobile site logo’ is closed to new replies.