Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1348249

    I like to display my logo smaller (80%) on mobile devices and also on tablets.

    I already found this code on the support forum:

    @media only screen and (max-width: 1016px) {
    .responsive #top #wrap_all .logo a img {
        max-width: 80%;
    }
    }
    

    But this code only seems to work in portrait view and not on landscape views.

    How can I make my logo smaller in both portrait and landscape view on mobile/tablets?

    Thanks a lot :)
    Alwin

    • This topic was modified 2 years, 5 months ago by Alwin.
    #1348262

    Hey Alwin,

    Could you post a link to where we can see the results you are getting please?

    Best regards,
    Rikard

    #1348267

    Yes of course, this is the website I am building right now, with the above CSS code included:

    #1348287

    Hi,

    Thanks for that. It looks like your CSS is applying, and if you would want it to apply on larger screen sizes, then you can try using a higher pixel value in the media query:

    @media only screen and (max-width: 1024px) {
    .responsive #top #wrap_all .logo a img {
        max-width: 80%;
    }
    }

    Best regards,
    Rikard

    #1348309

    Hello Rikard,

    The problem is that the code is working, but not on small mobiles screens in landscape (for example 734px width).

    Please look at my site at https://www.responsinator.com/ and you will see what I mean: the second example on responsinator is a mobile in landscape with 734px width, and it is not displaying the 80% logo, but the full size logo.

    Kind regards,
    Alwin

    #1348348

    Hi,

    Please try this CSS instead:

    @media only screen and (max-width: 767px) {
    .responsive .logo img, .responsive .logo svg {
        max-height: 60px;
    }
    }

    Best regards,
    Rikard

    #1348396

    Hello Rikard,

    That code works much better, thank you! I changed the logo size from 60px to 70px.

    Only problem now is the logo is still to big on IPad portrait (width 768px).

    Changing (max-width: 768px) into (max-width: 790px) makes the logo smaller on that iPad, but then the logo is not in the middle of the green header anymore.

    (see https://www.responsinator.com)

    Thanks,
    Alwin

    #1348416

    Hi,

    You can use custom media queries to target specific screen sizes: https://stackoverflow.com/questions/8271493/css-media-query-to-target-ipad-and-ipad-only#9504571

    Best regards,
    Rikard

    #1348428

    Thank you Rikard :0

    Best regards,
    Alwin

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Logo size on mobile view’ is closed to new replies.