Automatic viewport accross mobile?


This might be a noob question (and I’m using Bubble for a while) but for some reason, it appears that my webApp defines a 360px width viewport accross all browser.
This only happens on phones because the app resizes nicely on computer browsers.

My app is an SPA-like with every page being a div.

  • I’ve checked my max-width/width everywhere and everything is set to inf max-width…
  • I have no custom css that might change it
  • I have no meta-tags or script that might change it
  • I’ve tried to add new blank pages to the app and get the browser width, 360px remains the default value.
  • I’ve tried on different phones, same thing.
  • My page setting are column, 0 min width, 0 min height, 390px for default builder width
  • Putting <meta name="viewport" content="width=device-width, initial-scale=1.0">doesn’ help

What have I missed ?

Thank you

You may be using a template that was built with mobile-first in mind. Look into the innermost groups or elements down the hierarchy and you may see those 360 settings there.

Hi and thank you for your answer.
Sadly I’m not using any template, it’s 100% custom made and none of my container group have a max width of 360px somewhere

Hard to say what is wrong. From the terminology used in the post it may seem that css code is being used to control responsiveness across many elements.

Can you share a screenshot of how things look?

I haven’ defined any custom breakpoints and even deleting my entire custom CSS does’t change a thing.
What kind of screeshots may help you ?

How you see the app doing the wrong thing :slight_smile:

Really hard to show via screenshots… It’s not a “wrong thing” per say. It’s just that for some reason I have a standard responsive behaviour on my computer and phone emulator and a 360px width default setting on both phone I’ve tried.
And I know for a fact that one of the phone I’ve tried (a one plus 8) has a 410 px viewport width.