How do you make your product responsive?


I’m creating some kind of forum and i’m really close to the dev-end.

Now my goal is to make it as much responsive as I can (co people can view it on various PC screens, tablets and mobile phones).

I would like to ask you - what are best practices of responsiveness?
Something like: make it responsive from 1280 x 800 to 1920x1080 for PCs, then build separate version for mobile (different sub-pages) and make it responsive from 360x640 to 412x846?

How are you approaching it in your product?

1 Like

I set my page to 1200px and make the page responsive all the way down to 320px. Most elements at 1200px are the same if the page is wider, then as page width contracts all elements will react and continue to resize properly until 320px (sometimes I get it down to 300px).

I rarely use the mobile only page as I just get a single page to be responsive for any device width.

1 Like

Interesting point of view.
I’m curious how other Bubble users manage this case as well :smiley:

Hey @taon :wave:

I basically do the same thing as @boston85719. My pages are at 1200 and I only create one page that is fully responsive.

To me, it takes a lot of time to make two separate pages and constantly keep them both updated. Leads to bugs because I would forget to update one of the pages.

Saves me a lot of time to just stick to one page.

The only reason I might start at a smaller page size is if I was just making a mobile app for the phone only. Then I would start at a smaller screen size potentially.

It took a bit of time to learn responsiveness, but it’s a very valuable skill to have.

Hope that helps! :blush:


For All Your No-Code Education Needs: