Divi Tutorial – Control Mobile Stacking

I don’t know about you, but for me, mobile responsiveness is important. Like, really important.

At work, I spend hours working on how every single page looks like on up to 7 screen sizes, 5 different devices, with 3-4 browsers per device.

(I’m not kidding. It’s a LOT of work, but I’m happy that the websites I build look great anywhere, everywhere.)

Plus we work on making every margin, padding, leading, tracking, and font-size look its best on any given device.

However, the mobile responsiveness of Divi is very underwhelming.
It doesn’t have many breakpoints, nor does it allow you to control how they respond.

Does any other theme/builder allow you to do so?
Well, some do partially, but there’s no ONE builder or theme that does everything properly.

So we might as well just code things ourselves. 🙂

Notice
If you want to learn how to edit Divi and build with awesome responsiveness in mind, check out the course I made.

Back to the post… So, flexbox to the rescue.

Here’s an example of how you can use flex to control responsive behavior.

Let’s start with some full-width multi-column image banners.

Here’s a simple layout. (It’s a bit bandy, but this is just for demonstrative purposes, so please excuse the bandiness. haha. Oh, and I’ve offered to redo my daughter’s gym’s website, so I have some stock photos of gymnasts, dancers, and ballet..ers..? ballers? no.. ballet dancers..?.. anyways, that’s why I’m using those photos..)

(If you need any help on this, check this link to see how the full width banners are made, and why I add a -1px margin)

Looks nice. However, the problem arises when we get to mobile.

I know y’all know how things stack, but yeah, here, have a look..

I think there are some problems with this kind of stacking.

a. The original layout was made in a way for the 4 images to be just a horizontal strip, and the image below that section is supposed to be more prominent. However, in mobile, the 4 images are WAY more prominent. Not ideal.

b. Too much scrolling for images that are not important enough to fill the whole screen and more.

I think that’s a problem.

So, let’s find a way to fix this.

First, let’s make the images clickable into lightbox. So even when the images are smaller on the phone, people can click it to zoom in.

Next, let’s add some classes to the sections.

Start with flex-columns

Let’s do this to all the sections that will have images all the way across with 2, 3 columns.

However with a 4 column section..

Let’s add something extra:

So, why did I do that? I think 2 or 3 images side by side on mobile is okay, but 4 is a bit too much. It’s a bit too small per picture, so I think they should be a grid of 2 X 2. So I added another class to make that section different.

And here’s what we get!!

2 columns

3 columns

4 columns

Of course, you need to add the css, that’s right here!

@media (max-width: 980px) {
.flex-columns .et_pb_row {
  display: flex; }
.flex-columns.twobytwo .et_pb_row {
  display: flex; }
.flex-columns.twobytwo .et_pb_row {
  flex-wrap: wrap; }
.flex-columns.twobytwo .et_pb_row .et_pb_column {
  width: 50%; } 
}
@media (max-width: 479px) {
.flex-columns.twobytwo .et_pb_row {
  flex-wrap: wrap; } 
.flex-columns.twobytwo .et_pb_row .et_pb_column {
  width: 50%; }
}

(update: somewhere around mid 3.20’s version of Divi, ET lowered and changed the CSS specificity, so I took out the !importants. If you’re on an earlier version, and the default CSS is overriding this CSS, then add the !importants back in after the ‘50%’ parts.)

[sc name=”customcss”]

I’ll break it down for you:

1. Flex is added
2. The columns stay together. (This means you can use this for other types of modules, not just images!)
3. They won’t go all HUGE FULL SCREEN WOAH WHAT’S GOING ON on iPad portrait. (I dislike the monstrous stacking on iPads, portrait is still a great size to consider it paper-like, meaning, horizontal layouts are totally fine.)
4. The four column section gets flex-wrap applied.
5. The columns inside the wrap gets 50% width, so they’ll stay together in a 2X2 grid.

(Best part is) you can use this for other types of modules too!

I don’t have a demo layout for you to check, you can watch the video, to see it in action.

Hope this helps, if you have any questions, let me know in the comments below!

 
[sc name=”learn css”]
 
[sc name=”responsive-ad”]
 
[sc name=”podcast”]
 

PS. I have thought about sharing the layout (for free), and if you’re interested, let me know, and I’ll try to hurry and package it and upload it. Oh, and how about signing up for the newsletter to stay updated? Thanks!

Edit: cleaned up the CSS a bit to make it easier to read.

Featured Image: Photo by Flo P on Unsplash