Archived topic
Menu and header sizes differ on different devices
7 replies · Started by André on September 16, 2020
Hi,
I set my layout to have only one breakpoint. That is triggered if the size of the screen gets smaller than the sum of the width of the logo and the menu. On my desktop browser, I lowered the width until the menu breaks into two rows. I noted the number (1036px) and set that as the breakpoint. That now works on desktop browsers. However, If I use a tablet, it still breaks the menu into two rows. My tablet has a screen resolution of 1112x834 (portrait mode is working fine) and an innerWidth of 980px. The curious part is that the logo shrinks on a tablet landscape mode, so both the logo and the menu should fit easily, but the menu always breaks into two lines. What setting or CSS do I need to tweak?
My second part of the question is related. The logo fits perfectly with its left padding on the desktop. But on mobiles, the left padding is smaller than it should be. It should be inline with all the other paddings on the page. But on mobile (phones and tablets), it is still some pixels far to the left. How can I correct this?
And the third question, which is also related, is, how can I set the font-size for the header search on mobile. If I check in the customizer, it looks perfectly fine for desktop, tablet, and mobile. But if I use a real mobile or tablet, the font is larger than the form field. What is the CSS for the mobile search form field?
Why is the website looking different on a real mobile device and the customizer emulating the devices?
Thanks!
Hi there,
Let's try to tackle one thing at the time.
What kind of tablet are you using? I tried the Chrome simulator with iPad Pro and it seems to work correctly:
https://www.screencast.com/t/V8RCa7vp
What if you increase the breakpoint higher like 1080px or 1100px?
Can you also clear and disable your caching plugin to make sure nothing is interfering?
Let me know :)
Hi Leo,
Okay, it seems there is still a difference between a real device and a simulated device. I switched off all caches so I can see the real-time effects of changes. I use FlyingPress. When I deactivate this plugin, everything looks okay and as soon as I activate it - even with all settings turned off - the simulated device still looks fine, but the hardware device (iPad Pro 10,5) breaks the header into two lines. I will tackle this with the Plugin author and will keep the plugin deactivated for the time being.
How about the other two issues with the header?
Thanks!
Try this CSS for the second question:
@media (max-width: 1210px) {
#site-navigation .navigation-branding,
#sticky-navigation .navigation-branding {
margin-left: 20px;
}
}Adding CSS: https://docs.generatepress.com/article/adding-css/
Cool, that's looking good now. Now we need to fix the font for the menu search on mobiles.
I'm seeing this CSS you've added:
.navigation-search input[type="search"] {
font-size: 40px;
font-weight: 900;
}Maybe try making it desktop only?
@media (min-width: 769px) {
.navigation-search input[type="search"] {
font-size: 40px;
font-weight: 900;
}
}More info: https://docs.generatepress.com/article/responsive-display/
Thank you. I moved only the 40px part in the media query. This looks better because the font-weight will stay consistent. Now I need to get the media queries straight. I will experiment with different settings.
Meanwhile, I also added an additional menu in the mobile header. With your explanation, I was able to fix the logo in the mobile header on my own.
Thanks again, good job!
No problem :)
