Resources for Converting App to be Responsive

Hello!

Currently have a marketplace app but I need to make it responsive.

Any resources or common practices for this? IE: Container Layouts to use, No Nos for nesting certain containers within each other, Page Container, and which scenarios to be build for etc (not sure if i can do a few changes and it will be responsive on its own or i need to specify each use case/device type specs to adjust to).

any videos or articles would be much appreciated.

Thanks!

If you’re using the updated version of Bubble, everything will be responsive should you set it up to be that way. There are plenty of tutorials and documentation online about this.

One place I found some…

Lots

I’d be careful of looking for common practices as that doesn’t imply they are Best Practices…a lot of people can spout improper development strategies and sound like an expert simply because they are saying the tip in a public digital forum.

All of them for their different purposes, but likely not the fixed container layout.

Limit it as much as possible, but don’t have the need for nesting be a reason not to achieve the design you want

If the page has a header, it is almost always a column

Likely it will be, but might need to add conditionals based on device width

Every developer will have their own ways of implementing things, and for the most part, it might be determined by the actual design layout.

Get comfortable with understanding the differences between the container layout types, the user of padding and margins and the differences between them as well as how to have the container dictate child element width (I usually have child elements with no min/max width and just have the parent container set for max/min widths – if the design layout calls for it).

Play around with looking for some designs using Google, and attempt to recreate them so you can get some practice with the responsive layout settings in Bubble and how they interact with eachother.