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.
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”
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
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.
