Mobile responsivness


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%


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


Container layout cannot be changed conditionally.

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