Forum Academy Marketplace Showcase Pricing Features

Layout woes and responsive hiding rules

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!

Hey Clinton :slight_smile: Is this similar to what you are hoping to achieve for the block layouts?

Preview:

Editor:

I know the exact numbers at 640px aren’t the same in this example, but I think you can achieve what you are hoping to by grouping the red and blue blocks, and then setting a minimum width on each block - so that they will each span the length of the page once their minimum width is reached.

Hi @fayewatson,

Thanks for the reply! I’d been grouping the gray spacer to each color block rather than the color blocks together. This got me a bit closer, but it didn’t quite solve the problem in my instance.

The main difference being the additional spacer elements I placed on the right and left of the red and blue blocks. Without the spacers, the left and right margins stay fixed, and my elements get too narrow before they stack (and I have to play vertical margin games). Even though each block starts at 4 columns, it gets squeezed down to two very narrow columns before I stack (or I have to stack it at a wider screen). The advantage of including the spacers is that the margins shrink proportionally to the grid until I’m ready for them to collapse altogether.

I’m going to try to tweak the design a bit to simplify the responsive mechanics until we can get another option or two to help control the behavior.

1 Like

You probably know it better than I do, but if you were to ungroup the red and blue blocks and have their alignment each be centered, wouldn’t that make it so the margins are decreased proportionally on the left and rights sides as the page size decreases? Then adjust the blue and red blocks minimum width to alter how small they can get before breaking to the next line?

@clinton

Would you be open to posting your example layout on the forum app? I’d like to take a shot at it

@fayewatson: Just realized that my response to your last message never posted. I did play around a bit with the ungrouping both sets of blocks (and then got dragged back off to other projects). You do learn quite a bit about the underlying mechanics while going through these different scenarios. Anyway, that method may be the best option. The challenge I haven’t worked through yet is how to set the minimum widths – which apparently impact the rate at which a block shrinks and can throw off alignment to the grid.

@skylershelton Apologies for leaving your reply hanging. I hit the road to visit a client and am just looping back around to this project. I’ll try to get the example layout posted on the forum app tomorrow. If you’re curious to try it out, you may also be able to copy from the editor view (though I have had mixed results with that strategy).

1 Like

no worries, I’ve been playing around with the responsiveness on bubble layouts like a madman the past couple weeks.

It’s definitely a mix between flexbox and a grid, which is great, but like you replied to faye, it can be tough getting the minimum width right.

going no minimum width for containers and setting font containers to break at certain steps seems to be a reliable consistent practice