Change container layout on responsive breakpoint

Need help Responsiveness
1

I have a row container that I want to change to a column container when the page hits a certain breakpoint. The goal is to avoid these elements being way too narrow for mobile, and have them take full available width.

This is a common tactic in responsive design but I don’t see how to do this with Bubble. I tried creating a Condition but for some reason it doesn’t have Container Layout as one of the options.

How do you solve this?

1 Like
2

Here’s a setup that might help:

Demo: Bubble | No-code apps

Editor: Designui | Bubble Editor

Essentially, the two white groups in the row container should not have the “fixed width” checked (“fit width to content” should also be unchecked) and the min width should be set to a breakpoint (in my case, I set both items to 350px min width - so that when both items reach 350px, they stack on top of each other.)

Also, make sure to set the min height of the row container to “0” with “fit height to content” checked

4 Likes
3

Thanks, that was great. Turns out, the only thing I needed in my layout was the min-width of 350px that you mentioned. Cheers!

1 Like