Tech Stuff

Responsive Columns in Divi

Another boring Divi post. But as I keep discovering more middling-to-advanced things that need to be done, new problems arise. Today it’s a problem with how rows and columns wrap on a smaller screen. So look here:

For this site, a portfolio for an illustrator and cartoonist, we want to break up the monotony of:

Description: Image
Description: Image
Description: Image

And so on. But by default, these things are going to wrap in the order in which they’re presented. So we get the description appearing below the image in some of the rows.

Needlessly confusing and distracting.

Ordering the wrapping isn’t something built in, though it would be nice. The vendor’s tech support forum suggested duplicating the mis-placed blocks and adding custom CSS to hide/show them depending on the media query.

@media only screen and (max-width:980px) {
.FullView {
display:none;
}
}
@media only screen and (min-width:981px) {
.MobileView {
display:none;
}
}

There’s a starting point for an idea. But it would require turning a three-column row into a four column row, and I don’t know (or want to know) what that’s doing to the rest of the layout.

I also want to avoid a maintenance headache for the client who will be taking this over, and the job of having multiple places to change copy or replace an image isn’t something I want to hand over. How about instead we add the blocks to the Divi Library. We can save them as Global elements with all their attributes so when they’re changed once they change everywhere.

I saved all the elements of all the rows that had text on the right as globals.

global_elements

The Builder helpfully shows these in lime green. Less helpfully, the orange block is also supposed to be global.

Alternative Versions

The vendor’s suggestion would require turning a three-column row into a four column row, and I don’t know (or want to know) what that’s doing to the rest of the layout. But rather than hiding/showing individual blocks we duplicate the rows and hide or show them?

So I’ve created duplicates (where appropriate) or new rows, with the same modules but in different order. This also offers the opportunity to hide a few of them that aren’t as helpful in a small view.

And for each row, add the appropriate CSS class.

You can just add modules from the library, and if you’ve named them well enough they’re easy to find.

Once everything is saved and you’ve added the CSS block to your Divi theme options screen, everything flows as it should.

This CSS approach is probably applicable in a lot of cases, though it’s more direct when you’re working with the actual code. Divi hides the code from you, so there are only indirect ways of manipulating classes and so on. But having modules stored in a global library simplifies the upkeep, so you can edit once and publish.

Tom

Tom McGee has been building web sites since 1995, and blogging here since 2006. Currently a senior developer at Seton Hall University, he’s also a freelance web programmer and musician. Contact him if you have the need for a blog, web site, redesign or custom programming!

Leave a Reply

Your email address will not be published. Required fields are marked *