Hello,
I’m new to Bubble and while I’m loving it - I’m having issues understanding how to correctly build a responsive app.
Currently, I have my page set up to full width and have 4 equal elements across the header. These elements are not fixed-width and are responsive.
My issue happens when the page goes below 1080px. One element goes below while three stays on top. Below 810px, 2 elements are at the top and bottom.
I am looking to have 2 elements top and bottom starting below 1080px. Adding max-width does not help the issue. Any guidance would be appreciated. Thank you.
You need to combine the groups into parent groups…
Currently your 4 Groups (A,B,C,D) are independent, and are set to a width of 300, with a minimum width of 90%.
With you current settings, as the page gets narrower, your groups will shrink, until they hit 90% of their original size.
90% of 300 is 270, which times 4 is 1080 - so once your page gets to 1080 wide the groups can’t shrink any more, so 1 (group D) will jump to the next line, as the 4 groups are independent of each other.
To achieve what you’re trying to do, group the first 2 groups into a parent group (1), also with a minimum width of 90%, and group the second 2 groups into another parent group (2), again with a minimum width of 90%.
Now when the page resizes, the parent groups (with a minimum width of 90%) will shrink, until they get to a width of 540 (when the page width is 1080), at which point group 2 (containing groups C and D) will jump to the next line. Then when the page width hits 540, all 4 groups will stack 1 above the other.
Thank you! Everything is working now!
1 Like
