2 columns becoming 1 one mobile (new engine)

[Sarah_Esteve]

Hey there, I’m using the new responsive engine, and searching how to make a Full width RG with 2 columns, that becomes 1 colum on mobile screen.

Maybe someone out there will have an idea !

Thank you

[progressier]

A bit of custom CSS should do the job.
@media (min-width:992px){
.column{width:50%;}
}
@media (max-width:991px){
.column{width:100%;}
}

[oliviercoolen]

I think you’re referring to something like this? Loom | Free Screen & Video Recording Software

You can accomplish this by giving the group inside the RepGroup a minimum width. Either in pixels or in percentages.

Hope this helps.

[Sarah_Esteve]

Thank you guys for responses

It this particular usecase, what I need is display 2 columns (not 3) on desktop mode, and 1 for mobile, to got this :

I successfully achieve this with an htlm element containing

<style>
        #rg-wrap {
            grid-template-columns: repeat(1, minmax(0px, 1fr)) !important;
        }
    </style>

And adding to my RG a conditionnal as :

Hope this will be helpfull for others!