Tagged: ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • April 13, 2022 at 1:57 pm #1348249
    Alwin

    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, 7 months ago by Alwin.
    April 13, 2022 at 4:49 pm #1348262
    Rikard

    Hey Alwin,

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

    Best regards,
    Rikard

    April 13, 2022 at 4:55 pm #1348267
    Alwin

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

    April 13, 2022 at 6:33 pm #1348287
    Rikard

    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

    April 13, 2022 at 7:35 pm #1348309
    Alwin

    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

    April 14, 2022 at 11:43 am #1348348
    Rikard

    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

    April 14, 2022 at 1:45 pm #1348396
    Alwin

    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

    April 14, 2022 at 3:50 pm #1348416
    Rikard

    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

    April 14, 2022 at 4:35 pm #1348428
    Alwin

    Thank you Rikard :0

    Best regards,
    Alwin

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