I think one of the reasons I struggle with creating a responsive web app with bubble is because my first experience with web design was with Wordpress and Elementor. They use “sections” and “columns” to make sure everything is neat and aligned. I’m assuming that this structure also helps with responsiveness. For example, in a three column layout, everything in column 1 moves together, as does everything in column 2 and column 3 as the screen size changes.
I’ve been trying to figure out the relationship between sections, columns, and containers vs. groups in bubble.
Do groups = sections and columns?
How do you make a group behave like a column vs. a section?
What is best practice for creating nested groups? Should you? Should elements just float inside a single group? Or should related elements (such as an image and description) be inside 1 group, which is also nested inside another “column group”, which is then again nested inside a “section group”.
I havent found a set of guidelines like this yet, and I watched a few of the tutorial videos, but I’m still having some trouble. Any help would be really appreciated.
Hey @manuelmaccou
Thanks for reaching out and great question. (I worked with both Wordpress and Elementor for years as well). Two thoughts for you on this:
-
We’re currently working on a revamp of our responsive engine that runs on CSS and Flexbox. The goal here is to make responsiveness faster and more approachable for users building on Bubble. Unfortunately, I can’t provide an ETA, but it’s coming and we’re excited about it!
-
To more specifically address your question, I would highly recommend using groups to organize your content and there’s nothing wrong with grouping inside of other groups to further keep things organized. In fact, groups are the main way to communicate to Bubble how elements should react and move (relative to each other and the page) when the page’s width changes.
In your example of sections and columns, you could use groups similarly. Each outer group could be a section. Sections with columns could be an outer group and then inner groups for each column with contents inside the appropriate column (group) that they should be a part of.
One of our marketplace contributors recently introduced a resource that I’ve found to be quite helpful in approaching responsive design on Bubble. Might be of interest to you as well? → Guide
If you end up with any additional questions, don’t hesitate to reach out to Support@Bubble.io
