Hello,
I have a question regarding the workflows related to building pages that adjust their layout based on the breakpoint.
Here is my case:
I have an element that would need to change a bunch of properties based on a different breakpoint:
- The layout should change from row to column
- The width would change from 80% to 95%
Etc.
I am used to working with webflow, which allows to select a breakpoint in the editor (let’s say mobile, 320px) and select an element thats we want to adjust on that breakpoint. The changes I make there apply only on that breakpoint. So if I make some changes on the mobiel breakpoint those changes are NOT applied on the desktop.
Coding wise this means in the backend we are applying rules within the min-width and max-width bounds on the selected css classes.
Now, I tried to do something similar in bubble and found out that this sort of workflow is not possible. The responsiveness preview is only for demonstration purposes, and changes I make to the elements on different breakpoints apply universally.
So if I change the layout from row to column on mobile breakpoint, the layout is also changed on desktop, ipad, etc.
My question is: what is the best practise workflow for this?
I guess I could replicate the entire group of elements and apply conditionals when each group is visible depeneding on the screen size. Within groups I can the style elements to match mobile or desktop or ipad configurations.
Obviously this is not ideal because if I need to make some logic changes in the workflows within any of these elements then we are creating quite a mess. Each time we want to adjust a workflow we would need to do that separetly on different breakpoint groups.
Any advice is super appreciated.
Thanks and enjoy your day