Forum Academy Marketplace Showcase Pricing Features

Shrinking in Responsive Engine Switching Container Layout

Hi I am trying to get a group to change from Container layout ‘row’ to container layout ‘column’ when the page shrinks so that the text elements are evenly spaced side by side on a computer screen and then they stack on top of each other on a phone screen.

Any Ideas?

If you have an alternate Idea please let me know!

Like this?

Hi there, @anon31591471… your post reminded me of this recent response from Adam, and it should be the way to go, if I understand your post correctly.


Ok thank you both, but I would like the row to switch entirely to column once a certain page width is reached instead of having the last item in the row switch to the bottom.

Is this possible?

So my example is two main groups in a row container so the column on the right gets moved below the column on the left once the screen runs out of room.

Do you mean you just want everything in a row container? Then as your screen get’s smaller it just starts putting element by element under each other?

No, that is not possible.

In case anyone wants to know how to make items in a row oriented container turn into a column oriented container.

The trick I used was to make a condition on all items in a container (for example) that when ‘Current page width < 650’ → width of items within a container increase to 100% so they stack and look like the container is column oriented.

1 Like