What I’m trying to achieve is that the content group is 100% the width of the viewport when the side menu is collapsed. When the side menu displays, it forces the content group to resize and take up the remaining viewport.
My goal is to have a menu that will be hidden on small viewports like mobiles etc., but automatically visible on larger devices like tablets, laptops etc. (like https://appstack.bootlab.io/dashboard-default.html)
You can achieve that by using “add hiding rules” on responsive view. You can set minimum page width before the element go hidden, it will give additional space for other element that still visible to fill. Please see screenshoot below
thanks @hadirs,
Yeah thats what I have setup. The side menu group is setup to 230px fixed width, the content group set to 970px width (non-fixed, and min width of 99%). I have the page width set to full width.
I have the hiding rule set to 940px. When I resize, the hiding rule kicks in and the side menu group disappears. All good so far.
When I go back to desktop view, there is a large gap between the side menu group and the content group. I’m guessing that this is because my monitor is 2160 wide, and the max width of the content group is only 970px. I’ve tried to set the content group to 2200px wide and try it out, but then when the side menu group is displayed, the content group goes under it.
not sure how to fix this in bubble. I’ve looked at the inspector in chrome and can see that the content group element has a fixed pixel width and a fixed left position set. if I change them to be width: 100%, and left: 230px, it all looks fine.
Bubble is a blank canvas and we have to build the structure for the elements to react the way we want them to. That said … responsiveness is about grouping and setting widths for the most part.
NoLogo’s videos are great walkthrus. I watched most of them and learned tons. He goes fast doesn’t he?
I could provide suggestions on your specific case but I would always fall short on conveying a useful understanding of responsiveness in Bubble.
I have found that this video does a fantastic job and was very worth my while watching it. Perhaps it could provide some guidance for your use case. Long but extremely valuable:
