Archived topic
Convenience for mobile
17 replies · Started by PETRO on April 9, 2019
Hello,
I have problems in viewing the website in the mobile version. The problem is when I put the phone horizontally, the menu measures and other components overflow their margins and occupy the entire screen making it impossible to navigate the site.
How could I solve this problem?
I guess it's because of the limits of the code, in which it interprets the horizontal version as a tablet or computer screen and that's why it overflows. If so, how could you modify the screen limits set by default?
Thank you.
Hi there,
which device are you experiencing the problem on? I tested on an iPhone 7+ and an iPhone 5 and can't see the issue.
If you have a screenshot as well then we can take another look.
Hello David,
The model of phone that I use, is Xiaomi redmi note 5.
I attached the link where you can see screenshots that I made from my phone and from the mode of the developer in Google Chrome.
https://drive.google.com/open?id=1hZJx7-n9ZnMGbiBIUpQ8D63E4UbMeeFf
I am not sure if the stats i looked up are correct but it reckons the Xiaomi redmi note 5 has a CSS viewport height of 786px - and the mobile header kicks in at 768px.
GP Premium 1.8 has a Mobile Header breakpoint in Customizer > Layout > Header. It's in release candidate - you can download it from this site > Account > Downloads if you want to try it out.
Okay, thank you very much! It seems that it has been solved.
The only thing is that when you start to go down so that the accompanying bar decreases, it becomes larger, and a little of the margins continues to change and the logo measures change.
How or where could I solve this, since I have tried to modify the parameters in the corresponding menus, but it is not solved.
Here I leave the link with the photos:
https://drive.google.com/open?id=1_D-_Wg1IvkiHwFiI6Omxn8q3Pd2wWdDP
Do you mean the height changing when it is sticky?
If so then in Customizer > Layout > Sticky Navigation you can change the Menu Item Height. Every delete the value from the field or make it the same value as you have set for the Primary Navigation.
I'm still having the same problem.
Is it possible that the logo measures are a problem?
If so, what would be the correct measures?
Just to confirm, is the issue you're seeing the height of the mobile header logo? Or is the menu toggle outside the viewport? Hard to tell from the screenshots.
I leave new screenshots, in which I have indicated where the current problem is.
The main thing is in the logo and when under the page of the site and the floating bar appears. The bar stretches out of the lateral limits and the logo becomes smaller.
https://drive.google.com/open?id=1z40w34izB9KRBvsh-e2FFkYU55hWhbsS
Hmm I can't get this to happen. Is it happening on every page, or only a specific one?
I leave a recording of the screen, of the snowing through the site.
If possible, I can create an account with redaction permissions so you can see where the error is. since I have tried in all the sections and I do not find the place where I could solve it.
https://drive.google.com/open?id=1z3vsdIli1-GtQdxQYPSzrn5YXwgfzTs3
It looks like you might have some content causing horizontal scroll.
What happens if you add this CSS?:
body {
overflow-x: hidden;
}Fixed the error that the mobile menu does not appear on all pages of the website.
But it follows the problem of logo measures and margin output when browsing the page.
https://drive.google.com/open?id=1H5VBIIH5pUJPhbrGBYa7IlWVpgutJ6KV
Does that still happen if you create a new page with no only lorem ipsum content? No page builder etc.. Just enough to allow the sticky nav to show up.
Yes, that happen is still present in a new page.
