How to keep 3 columns for mobile, tablet, and desktop view in Divi

In some cases, you want to keep the three columns for the mobile (on the phone) because this makes your design look great and you don’t need to keep scrolling on the phone to see the whole content.

This can be super handy when you are working with different design aspects on your website and don’t want it to stack on top of each other in the mobile view.

Here is one way to do it:

Easy tip to keep 3 columns for the mobile

  1. Go to “CSS ID & Classes” under “advance” in the “row settings” and enter “three-columns”
  2. Go to “Custom CSS’ in under “advance” in the “row setting” and enter “display; flex;” in the Main Element field. 

Desktop view, Tablet, and Phone

If you want the columns to stop breaking in desktop view, tablet, and on the mobile – you will need to update it to all the views.

Add “three-columns” under “CSS Class” and “display:flex;” under “main element”.

Adjust sizing;

 I also adjusted the sizing for the row settings, this is again depending on your design of the page:

 

  1. Go to “Sizing”: under design in the Row Settings.
  2. Change to ‘yes’ to use custom gutter width
  3. Gutter Width: 1
  4. Equalize Column Heights: Yes
  5. Width: 80%
  6. Max Width: 1080px

I hope this will help you design cool pages in Divi and keep columns side-by-side on mobile.


Also published on Medium.