Logo not scaling on mobile devices

Hi!

I'm developing the site: http://wernberg.dwpudvikling.dk and i have a small problem.
The logo is not scaling when i see it on my phone.
See screenshot here: http://i.imgur.com/c09syhX.jpg

Best regards :slight_smile:

  • Tyler Postle

    Hey again Lasse,

    Usually when making images mobile responsive we would make the width 100% so it always stays within the max width; however, your logo is set to 100% height - that's why it's too large on small screens because it's keeping it's full height. If we changed the width then it would distort the image.

    So, what we'll do is force less height only on screens under 600px with a media query. Like this:

    /* Responsive logo fix */
    @media only screen
      and (max-device-width: 600px) {
    .q_logo img.mobile {
      height: 60% !important;
    }
    }

    Normally we don't want to use the "!important" declaration, but sometimes when overwriting styles it can be a necessary evil.

    Let me know how that goes!

    Cheers,
    Tyler

  • Anang

    Hi Lasse

    Working with Tyler here :slight_smile:

    Do you have a quick fix so that it also scales down when i drag the window on desktop?

    Is what you mean is to have 60% height to logo whatever it screen sizes ?
    If yes you can try remove media query css, and apply to all image logo and not only with mobile class with this css :

    .q_logo img {
      height: 60% !important;
    }

    Please note it will also resize logo on your sticky header (when you scroll down, and new navigation bar appear).

    Please let me know if that's what you're looking for :slight_smile:

    Best Regards

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.