How To Maintain Three Columns In Tablet And Mobile Views

Hi everyone. Today I’m going to show you how to maintain three columns on a tablet and mobile phone.

‍

This simple technique is very handy if you have lists of logos to display on your page.

‍

Normally, if you have three columns on the desktop, it will automatically adjust to a single column in tablet and mobile views. There will be no problem if you only have 6 images to display, but if you have more than 20 images, that will be a long page to scroll on mobile.

One of the best ways to do this is to make the dimensions of your images the same width and height. There are different photo or image editing tools that will help you do that.

I resize mine into 1024×768.

In this tutorial, I will display 3 by 4, meaning three columns by four rows.

First, upload all your edited images to your media library by going to Media, then Add New.

‍

Next, in your Divi, insert a new row and choose a 3-column layout. Add a new image module to each column by clicking on the rounded plus icon.

‍

In your row settings, click the gear icon and go to the advanced tab. Navigate to custom CSS and add “display flex” in the main element field.

‍

Then duplicate the row until you have four rows in total and update the images on the second row up to the fourth row.

‍

Adjust the row padding on tablet and mobile view to make it more presentable.

‍

That’s it. One of the simple ways to control column layout in tablet and mobile view. You may just play around with the padding and margins to match your design.

‍