# Responsive group design problems (overlapping and height)

**URL:** <https://forum.bubble.io/t/responsive-group-design-problems-overlapping-and-height/137148>\
**Category:** Responsiveness\
**Created:** [February 19, 2021, 9:41pm UTC](https://forum.bubble.io/t/responsive-group-design-problems-overlapping-and-height/137148 "2021-02-19T21:41:07Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![emeinarsson](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/emeinarsson/32/86359_2.png) [@emeinarsson](https://forum.bubble.io/u/emeinarsson)\
**Post date:** [February 19, 2021, 9:41pm UTC](https://forum.bubble.io/t/responsive-group-design-problems-overlapping-and-height/137148/1 "2021-02-19T21:41:07Z")

</div>

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](https://us1.discourse-cdn.com/bubble/original/3X/1/2/12aad9f180887b7f1d729bf6e10e5d5248a6c6f6.jpeg)

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](https://us1.discourse-cdn.com/bubble/original/3X/c/0/c0c1cc4c9851cbe0a9fcc561c73b28f91301e811.jpeg)

I appreciate all tips 🙂

---

<div class="post-metadata">

**Author:** ![cmarchan](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/cmarchan/32/253062_2.png) [@cmarchan](https://forum.bubble.io/u/cmarchan)\
**Post date:** [February 19, 2021, 9:46pm UTC](https://forum.bubble.io/t/responsive-group-design-problems-overlapping-and-height/137148/2 "2021-02-19T21:46:48Z")

</div>

Hello!

This video should provide info to address your issue 👍🏻

[![](https://img.youtube.com/vi/VYjEA_XeQwk/maxresdefault.jpg "Responsive Grid Layout | Bubble.io Tutorial") ](https://www.youtube.com/watch?v=VYjEA_XeQwk)

Hope it helps! 🙂

---

<div class="post-metadata">

**Author:** ![emeinarsson](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/emeinarsson/32/86359_2.png) [@emeinarsson](https://forum.bubble.io/u/emeinarsson)\
**Post date:** [February 19, 2021, 10:14pm UTC](https://forum.bubble.io/t/responsive-group-design-problems-overlapping-and-height/137148/3 "2021-02-19T22:14:42Z")

</div>

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 🙂

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…