Tagged: logo size, mobile view
-
AuthorPosts
-
April 13, 2022 at 1:57 pm #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.
April 13, 2022 at 4:49 pm #1348262Hey Alwin,
Could you post a link to where we can see the results you are getting please?
Best regards,
RikardApril 13, 2022 at 4:55 pm #1348267Yes of course, this is the website I am building right now, with the above CSS code included:
April 13, 2022 at 6:33 pm #1348287Hi,
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,
RikardApril 13, 2022 at 7:35 pm #1348309Hello 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,
AlwinApril 14, 2022 at 11:43 am #1348348Hi,
Please try this CSS instead:
@media only screen and (max-width: 767px) { .responsive .logo img, .responsive .logo svg { max-height: 60px; } }
Best regards,
RikardApril 14, 2022 at 1:45 pm #1348396Hello 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,
AlwinApril 14, 2022 at 3:50 pm #1348416Hi,
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,
RikardApril 14, 2022 at 4:35 pm #1348428Thank you Rikard :0
Best regards,
Alwin -
AuthorPosts
- The topic ‘Logo size on mobile view’ is closed to new replies.