Greetings! Just a quick tip on a way to deal with the issue described in this post , whereby you’d like explicit control over the number of RG columns displayed at any given page width. Until Bubble provides such a feature in the editor, one way to achieve a more versatile grid layout is with a bit…

[image] daviddr17: it would be great if bubble makes it possible to add it to the element directly Yeah, for sure. [image] daviddr17: instead of going with the id and extra html element. FWIW, the CSS should ideally be added at the page or app level, so the HTML element isn’t strictly…

Hey sudsy! Thank you very much for this suggestion. I was looking for it. I have an rg that should fill the entire width of the screen, with columns that is dynamic to a list I have on this screen. However, the last column is still at minimum width. e.g. For a 4 column rg the first 3 width were ~…

Are you using a conditional to change the contents of the HTML element from empty to the custom CSS at the desired page width? Might help to add the working example to your own playground app so you can dissect it (if you’re not averse to installing the browser extension).

Hey, thanks for replying @sudsy I’ll give you a little context: I have “a list of numbers” element and an rg that uses it as data source all in a floating group. When a user open a floating group that list of numbers (and so as the rg) change according to the “displayed data” for the floating grou…

[image] moose: So far it’s working great, meaning the rg is filling the entire page width, except for that last cell which stays its original size Just to be clear, Bubble’s default RG behavior works fine in most situations. The custom CSS tip described in the initial post above specifically …

Not to bore you with details, but your solution worked perfectly for what i wanted to achieve. The default RG is to “reserve” place for empty cells if you know what I mean. Because I don’t how many list items i kept the rg column min-width to 10px. But the problems is bubble will not ignore the re…

guys is there a way to do the same with rows ? I tried but i can’t find a way to replace grid-template-columns: repeat(1, minmax, (0px, 1fr)); by grid-auto-rows: minmax(max-content, 100%); thx

You tagged me in your post but i’m not sure myself

Hello everyone, this would help me but I’m new to bubble and I don’t know how to implement the CSS, I inserted an html element and after the # I inserted the name of the rg but I see no changes. I’m using the new responsive engine [image] and it doesn’t make larger columns but even in large scree…

[Here's How] Control number of RG columns at various page widths - new responsive

Tips

sudsy August 20, 2022, 4:06pm 22

Please note that this tip has been rendered obsolete since this feature was introduced.

Topic		Replies	Views
I can't make completely responsive columns in new responsive engine Responsiveness	2	522	May 17, 2022
Dynamic RG column? Responsiveness	1	435	September 4, 2019
Responsive RG cells Responsiveness	5	85	May 5, 2025
Change Number of Columns in RG When Page Width Changes Responsiveness	3	421	March 26, 2023
RG - Are Dynamic Columns Possible? Responsiveness	18	5126	August 3, 2018

[Here's How] Control number of RG columns at various page widths - new responsive

Related topics