[Help] How do I force horizontal items to move to next row?

Hi,

I guess this should be pretty simple, but I’m not having luck.

I’ve got 3 elements spread horizontally in my normal desktop view.

On the left side I’ve got a block of text formed by a Headline and Text Area and on the right side I’ve got an image. It’s a product feature section. So description and image.

From 1200px to 768px I want them to stretch correctly and stay horizontally. More or less I got this. I had to add a font size conditional to make it look pretty.

From 768px and below I want the image to move to next row. I’m struggling with this.

Can someone kindly explain what combination of groups and responsive settings I would need to use to force this situation?

Regards,
Jon

You have groups of elements, and when you want it to wrap, you can set the minimum width on the group, e.g. 768, you can also use hidden shape elements with minimum width set 0 as dynamic spacers.

It takes a bit of playing and practice to get responsive to work well, but use Chrome dev tools Responsive view, it is better for trying that the built in edit adjuster.

you can see this in action with the the blocks of content below;

4 Likes

Thanks @DaveA

I was driving myself crazy with the minimum width as I had it as you said.

The problem in the end resulted that the group was inside another group and was messing the container size.

To solve it I made sure that when container(parent group) was less than 1009px it would collapse margins and then automatically the minimum width started working correctly :slight_smile:

BTW, love those dynamic spacers :slight_smile:

Thanks again.