New responsive engine from row to column on small screen

I working on bubble with the new responsive engine, I am having a bit of difficulty transforming from row on a bigger screen to column on a smaller screen. I try using css to do that but it still not work.

Is it a RG, or is it some other container type set to “row” layout mode?

Generally speaking, custom CSS should not be necessary. When items within a “row” container reach their minimum width, they should automatically start wrapping (stacking).

Might need more detail to help further.

-Steve

Thank you steve, the fault was from my side, I just set the minimum width now it is working correctly

1 Like

Hey @sudsy

How do you balance this with also making the elements fit to smaller screen?

E.g. I have two columns in a hero-section (so two items). I have both their minimum width set to 320 px as this would be good for mobile.

However, that means it first wraps when it is 320 px. I would like it to wrap e.g. when page width is 600 px. But if I set the width to 600 px for each of the items, then it would wrap but not fit for smaller screen sizes.

Hi @maja-overgaard,

If two elements having minimum widths of 320px each are inside a row container, then I would expect the elements to wrap when the container’s width reaches 640px. Keep in mind that margins are factored into (considered part of) an element’s width.

If that’s not what you’re seeing or if I’m misunderstanding the issue, additional detail or screenshots might be helpful.

-Steve

I agree, if 2 elements of each 320px (without any margin), then it would wrap at 640 px. However, I would like it to wrap at e.g. 800 px or 920px (because of the design). Question is how to achieve that while still making it be responsive down to 320px as well.

I tried to explain it fully here as well with examples: Bubbles Starter Template - Made Responsive in New Engine

Also, there is a link to a public editor.

Thanks a lot for taking the time!

Ok, I think I understand. Explicit breakpoint support is something Bubble plans to add, but it’s not available yet. I have no idea what their timeline is on that functionality.

(There might be some hoops you can jump through to achieve it now with invisible spacer elements or something, but I haven’t experimented with that.)

Good luck,

-Steve

Gotcha! Thanks for clarifying. I thought I missed something, but good to hear it will come with specific breakpoints. I will continue down the work-around path.