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.

Divi Tutorial - Control Mobile Stacking

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..)

Divi Tutorial - Control Mobile Stacking

(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..

Divi Tutorial - Control Mobile Stacking

 

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

Divi Tutorial - Control Mobile Stacking

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

Divi Tutorial - Control Mobile Stacking

 

However with a 4 column section..

 

Divi Tutorial - Control Mobile Stacking

 

Let’s add something extra:

 
Divi Tutorial - Control Mobile Stacking

 

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

Divi Tutorial - Control Mobile Stacking

 

3 columns

Divi Tutorial - Control Mobile Stacking

 

4 columns

Divi Tutorial - Control Mobile Stacking

 

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% !important; } 
}
@media (max-width: 479px) {
.flex-columns.twobytwo .et_pb_row {
  flex-wrap: wrap; } 
.flex-columns.twobytwo .et_pb_row .et_pb_column {
  width: 50% !important; }
}

 

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!

 

Notice

Hi! Please consider signing up for my newsletter for... two emails (at most) a month of news, updates, and special offers, including child themes and more courses. Sound interesting? The signup form is right here!


 

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!

PPS. If you want to check out all the tuts on flex, check here

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

Featured Image: Photo by Flo P on Unsplash