Creating a split screen hero that stacks on smaller sizes

Hi all. I’m trying to create a hero section that is essentially two groups side by side on larger screens, but then those two groups stack vertically on smaller screens. I thought maybe I could set a condition to change the hero layout from row to column on a smaller size, but I didn’t see one. I’ve searched and haven’t found a clear answer. Visuals attached of what I am trying to do.

Current set up: Group A set to column, Group B inside Group A set to row, and then two independent groups (lets call them Group L and Group R) inside that row set to 50% width.

When the parent is set to a ROW you can achieve this with just min-width on your columns. When you collapse the page, it will push the column down.

Hi - thanks! That’s closer to working. But now my image (Group Right - marked by the yellow box) disappears. Thoughts on how I can fix? The left and right groups are set to 100% height, while the parent container is set to “fit to content”

Whats your parent container set to? Is it fit height to content?

Oppsiesss… just saw you did. haha

Can you show me a screenshot of your element tree?


Group “Hero:” set to column + fitting height to content
Group “Hero Container:” set to row + fitting height to content
Group “Hero Left:” set to column + min width 50%, min height 100% + conditional min width of 100% on smaller size
Group Hero Right Image:" same as Hero Left

Have you set the min height of the image? not just 100%.

If you jump into my Discord, I can give you real-time advice, may be quicker too. I am currently working on another project.

@GH5T found a hack to get around this problem!

Solution = assigning a large top margin to the group the sits below the groups I was trying to stack (named “Recent Stories” in this case). This margin prevents the groups from overlapping.