How to Keep Divi Columns in Mobile View Using CSS

Posted On April 27, 2020

Download Main CSS code and paste into your Divi Theme Custom CSS

[caldera_form id="CF5e6ac396af22d"]

 

Keep Divi Column ratio and build aesthetically beautiful mobile layouts for the Divi Builder. View demos

No Results Found

The page you requested could not be found. Try refining your search, or use the navigation above to locate the post.

Regular Section

After activating the CSS plugin, or copying and pasting the css code in the css custom area, all you have to do next is select the row that you want and type the related CSS class name in the class field for the row container.
1. Select the Regular section

2. Select your desired row

3. Take note of the related class name from the regular section chart for the row that you chose.
4. Open up the Row container settings and type the class name in the CSS Class field.
CSS Class Field image
5. You’re done.

Specialty Section

As before, after activating the plugin, all you have to do next is enter the correlating class names. However there are two classes we must enter. One for the section column layout and the other for the row container embedded in the specialty section column layout.

1. Select the Specialty Section

2. Select the desired section layout

3. Take note of the related class name from the the column layout that you choose. See specialty section chart below.

4. Open up the Section settings and type the class name in the CSS Class field.

CSS Class Field image

5. This is extra step for the specialty section. After choosing your desired section layout and it’s class name, select the respective row layout and it’s class name from the as seen in the regular section chart. Open the settings for the row container and add the CSS class name to the CSS field. Note that most row containers for the specialty section has up to 3 columns with an exception with 4.

6. All done. Thanks for giving my code a try. Feel free to customize it however you want. Do what works best for you. If you have any questions feel free to contact me through any of my social media handles. All the best to you.

Download Colour Layout

Written by kerwindows

Related Posts

Test page

Mobile Header 1 Light theme[ds_layout_sc id="243931"]

Divi Default Animation Keyframes

CSS animations allow you to traverse from one set of CSS rules to another over a predefined period of time. Transitions between styles based on hover or click may be familiar to you. This is a similar thing except that it does not require any user interaction to...

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *