Responsive group design problems (overlapping and height)

Need help Responsiveness
1

I’m having a hard time figuring out why the groups I have respond they way they do. !

Problem A: Groups overlap when the screen gets smaller.
The hierarchy is Group A-above (Group Left, Group Right) and Group B-below (same size as Left and Right combined).

A-overlapping
A-overlapping1280×624 58.3 KB

I’ve tried searching, looking at tutorials, etc, but can’t noone talkes about this it seems.

Problem B: One group’s height gets smaller. It used to be the same height, but then all of a sudden it started shrinking. What controls height?

B-size
B-size1175×390 48.6 KB

I appreciate all tips :slight_smile:

2

Hello!

This video should provide info to address your issue :+1:t2:

Hope it helps! :slight_smile:

3

Thanks - I’ve seen a fair share of his videos and learned a lot.

I solved problem B. I had turned on “shrink element’s height when hidden”, and I had a small element at the bottom of that group. So now all 3 columns are equal height :slight_smile:

Problem A remains unsolved. I’ve played around with all width settings, but what I don’t get is why the groups don’t move under, and instead just go half way…