Mobile responsivness

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

@lukas7

Container layout cannot be changed conditionally.

You can build a second UI with the alternative layout and display that when needed (breakpoint)