- This topic has 7 replies, 2 voices, and was last updated 3 years, 6 months ago by Leo.
-
AuthorPosts
-
September 16, 2020 at 6:53 am #1445667André
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 1112×834 (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!
September 16, 2020 at 2:58 pm #1446403LeoStaffCustomer SupportHi 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/V8RCa7vpWhat 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 🙂
September 17, 2020 at 1:55 am #1446781André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!
September 17, 2020 at 8:09 am #1447331LeoStaffCustomer SupportTry 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/
September 17, 2020 at 12:35 pm #1447688AndréCool, that’s looking good now. Now we need to fix the font for the menu search on mobiles.
September 17, 2020 at 1:35 pm #1447744LeoStaffCustomer SupportI’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/
September 18, 2020 at 12:24 am #1448148André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!
September 18, 2020 at 8:39 am #1448906LeoStaffCustomer SupportNo problem 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.