Making groups stack on smaller width screens

[svenschuldt]

Hi,

perhaps I am dealing with the new Responsive Engine wrong and my expectations are over the top, but I just want to be sure, if so.
I am playing around with some test-screens (thats why the ugly colours ) in order to understand better the possibilities.

What I am trying to do is as follows:

I have a test screen set up, which consists of a group in which two repeating groups are put aside each other in a row.
The idea is now to have the right hand repeating group stacking beneath the first (left hand) repeating group, once the screen becomes narrow, like on a mobile screen.

When I show it on a wide screen, it looks like this (as expected):

However, when I narrow down the width of the browser, what happens looks like this:

What I am looking for though is something like this:

I do not know if this is at all possible, but if it is, I am wondering what I have to do.

Any advice as always helps, thanks!

Cheers

Sven

[sudsy]

@svenschuldt

when I narrow down the width of the browser, what happens looks like this

It appears the two RG’s are scrollable horizontally, which suggests their minimum width (or that of one or more elements inside) isn’t set like it should be.

Basically, when things can’t get any narrower, they should stack.

-Steve

[vinaytadahal]

Step 1: set page width to 1280
Step 2: Draw a group with min width 320px max width 1280px with row layout
Step 3: add 2 groups within with min width 320px and don’t care about max width. Layout can be column
Step 4: add the RGs as required with min width of 280px

You can add margins and play around with it.

That’s it. As you resize the windows both will stack.

Hope this helps

[svenschuldt]

Hi @vinaytadahal and @sudsy - thank you both!
Exactly the right solution and that helped me a lot (!) to make progress across my whole app

Thanks a lot!