I’m rebuilding a site built around a typical 12 column grid, and I’m running into some obstacles trying to get the layout working correctly. I’ve built a demonstration here: https://grids.bubbleapps.io/version-test?debug_mode=true. The top two rows work correctly, but I run into issues with the bottom row. Above 640, the blue and red blocks span 4 columns each. As soon as I drop below 640 for the page, I want to hide the left and right spacers (gray) and collapse margins (so that each block spans all 12 columns). It’s this combo of stacking and hiding that is causing me issues.
In the upper rows, I just set the hide rule on the spacer. That option would work if I could hide based on page width rather than just container width. Since the container width increases, the spacer reappears after the groups stack. I thought I might be able to get the right effect using conditionals and visibility, but it seems that visibility doesn’t work the same as a hide rule.
At this point, the only solution I can really think of is to duplicate the content so that I hide/show one or the other based on overall page width. This feels like a hack, but I can’t come up with any other way to get a similar effect given this set of tools. Anybody have other ideas?
@emmanuel and @josh, what are the chances of getting either a “responsive hide” option within conditionals or an option in the responsive setting to hide based on page width as well as container width. I’d have to say that the latter option seems much more powerful and intuitive? As it is, I have to pull out scratch paper and a calculator every time I set up a hide rule.
Thanks in advance!