Responsiveness looks correct in Bubble view, not stacking on actual mobile production

My responsive view looks good on Bubble but when I pushed to production, my pages aren’t adjusting the same way at the same widths. Something looks fine at 360px width in Bubble but on my phone, the same elements aren’t stacking. I’m not sure where to start on troubleshooting this.

Just to confirm go to https://whatismyviewport.com/ on your phone and verify the viewport width. Some phones with large scale set will be super small px

Great resource, thank you! I confirmed that my mobile screen is 412px x 786px so I’m looking at my responsive editor at a page width of 412px

1 Like

And to clarify: this helped me confirm what width I should be targeting, but I’m still seeing the problem: the view of 412px in the Bubble responsive editor looks correct but on my 412px width mobile device it’s terrible. Any ideas on why this wouldn’t match up? Trying to adjust my designs feels like a shot in the dark when the editor doesn’t reflect my device consistently.

Did you use inspect tool of google while you are building or used your own phone in production ? or did you solely use bubble responsive editor to check ?

I used my own phone to look at production and compared that to production in Bubble (which is when I found the mismatch)

1 Like

As a general rule use google dev tools,it is a highly respected and valuable tool,right click on page and click inspect,than you can check the responsivenes on any size

I’ve used Google dev tools before and I’m familiar with it. Are you saying I should ignore the responsive view in Bubble and instead design based on what I’m seeing in Google web tools (regardless of if it looks wrong in the Bubble responsive view)?

I don’t think ppl use the responsive view. I keep my phone propped up and I have my version-test open right there to check how it looks.

Yes but if you are testing for safari,you won’t be able to inspect as google dev tools, so try to find a solution for safari .

Man what a bummer to find out after a couple weeks of building assuming it was reliable. My bad I guess for trusting it was correct. Thanks both of y’all (@tylerboodman) for giving me a viable solution to try going forward.

1 Like

I do, and didn’t know that might be a mistake until seeing your post :rofl:

Oops didn’t mean to speak for everyone :sweat_smile: Maybe its good but I found it long time ago didn’t follow exactly what my phone was doing so I abandoned it.

There was like weird conditionals not following page width rules sometimes, maybe fixed by now

1 Like

Admittedly I haven’t ‘launched’ yet so everything I build I preview on my Android…but luckily I will be doing a soft release with friends first to hopefully iron out cross-platform compatibility including formatting and responsive issues. I appreciate the tip!

1 Like