Hey guys, I need help with my mobile index page set as min 350 and max 1440.
My mobile header is fixed and ive tried everything. Can someone help me? 
Hey @hahz5d You might want to check the width of each element. I suggest you don’t use “fix-width” This is sometimes tricky, I tend to forget this as well. Most of the time if this happens to me, there’s one or a couple of elements that either have a fix-width or have a bigger min width compared to the mobile view — this results in a horizontally scrollable page in small screen sizes. Hope this helps 
Thanks, i’ve been trouble shooting this issue for a month now and i’ve verified that all the min and max width was aligned.
Hi @hahz5d,
There are two ways to solve the issue. One of it will be having a specific mobile page. So you open a new page then choose the related page’s name in the mobile version drop down.
In which, when Bubble App detect user’s device is Mobile, then they will direct them to that page.
Pros of it will be you can design a specific UI just for mobile.
Cons of it will be you need to take more time and you have to do it for every single page. Further, if someone is browsing your website with spreading their screen, you may not able to facilitate them.
While the second method is to review all pages’ and element’s minimum width. I do recommend you review it with 280px, which should be thin enough for most smartphone model. You may want to review header and other elements.
You can use the inbuilt responsive tab in bubble or chrome and open developer tools to scroll thicker or thinner. Depending on your personal habit (Cause I usually check through chrome)
Pros of it will be less task and both mobile and pc can be facilitated at the same time
Cons of it will be some functions (e.g.: Hovering) is not able to use in mobile version. So you may want to bear in mind and change the interaction (e.g.: From hovering to clicking).
This topic was automatically closed after 70 days. New replies are no longer allowed.