Keep Text blocks square

I’m creating a site with 6 text blocks, 3 across and 2 down, and I’d like them to remain square regardless of the screen width. Similar to this: http://convergese.com/

My site is: http://jhbodyshops.wpengine.com/

Any suggestions?

Thanks,
Fran

Hey Fran,

Unfortunately, there isn’t a way to keep the columns square due to responsiveness of each and varying content in each. You may be able to do some CSS work to accomplish that, but that is a bit outside of the support we offer in here. How comfortable are you with CSS?

Best,
Billy

Thanks for the quick reply, Billy. Eh, so-so, on the CSS. Is there a resource online you could point me to for a how-to?

Hmm, not off hand unfortunately. In this thread, a user mentions a jQuery function that shows some promise for the height. I would imagine you could either use that for width as well or find something very similar out there. Sorry I don’t have a better answer there for you. I’ll keep this thread open in the event another user has a solution they can offer up.

Best,
Billy

Thanks, Billy. I appreciate that. :slight_smile:

I’m playing around with some of the other modules and I found that if I use a square picture with a hover caption then my background remains square. So is there any way to put static text on top of a picture, instead of just on hover? I’ll need to use bullets and links for some of the text.

Hey Fran,

Placing a static text on top of a photo module would be a bit tricky using CSS. You can, however, just include the text on the picture but that would be the last thing I’d do.

The main problem that I see on your layout is when it reaches a certain breakpoint(medium breakpoint?) wherein 3 blocks per row is too much. I would suggest replicating that layout into a 2x6, set the main layout to display on Large Devices Only then set the replica to be displayed on Medium and Small Devices only. The Display setting is under Advanced. This way, you won’t have to do any CSS.

Hope this helps!

Ben

Thanks, Ben. That’s a great idea. I’m just getting started with BB so I didn’t really understand the purpose of that functionality. That’s so much easier than media queries for me! One question, though, Is there somewhere that the breakpoints for Large, Medium and Small devices are defined? That would take some of the guesswork out of it for me.

Thanks for your help!

Fran

Hey Fran,

Glad you like the idea. You can adjust the Medium and Small Breakpoints under Global Settings.

Ben