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

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

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.

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!

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!

About The Author

Hi, I'm a front-end wordpress developer, web designer, and hobbyist photographer living in Australia, and I made this website to share thoughts and tips about web design and everything related to it. If you want to chat, drop me a line at pk@almostinevitable.com

You should subscribe

I hate hate hate spam. So I will try to provide a newsletter with useful tips and freebies once every other week, or once a month. Does that sound ok? Cool!

Email address:

Leave this field empty if you're human:

Y No Ads?

I don’t have any ads on my website because:

a. I hate ads. I always use ad-blockers, so I expect others to use them as well.b. I have a web design job that pays for groceries, gas, and rent.c. I plan on selling child themes, layouts, and courses on this site, so proper products to be added later.