Archived topic
Logo too large in mobile and tablet view
7 replies · Started by Adam on January 14, 2018
Hi, my logo image shows up fine in desktop view, but in mobile and tablet views, it takes up the entire width of the screens and pushes the mobile navigation menu and search icon down into a second row. For mobile and tablet views, how can I get my logo positioned on the left side and the mobile nav menu and search icon positioned on the right in one row?
Any advice is appreciated.
Hi there,
Try our mobile header feature: https://docs.generatepress.com/article/mobile-header/
The mobile header logo is supposed to be small square-ish icon so we might need some extra CSS to make it look good :)
Thanks Leo! I enabled the mobile header and uploaded a small mobile header logo that's 165 x 13 px, and like you predicted, it looks a little wonky. Any advice on how I can style it so it's crisp-looking like the desktop logo?
Hmm I still see a image of width 274px being uploaded?
I just resized, renamed, and reuploaded the mobile logo. It's 150x12px now, but in the mobile preview, it still looks all stretched out and blurry--though a little better than before.
Any ideas?
Try this CSS:
@media (max-width: 768px) {
.mobile-header-navigation .site-logo.mobile-header-logo img {
height: auto;
}
}Adding CSS: https://docs.generatepress.com/article/adding-css/
Leo, that worked great! Thank you so much for your help--and on a Sunday. You and Tom are so helpful every step of the way. :-)
Glad we've been helpful :)
