How to Keep Divi Columns in Mobile View Using CSS

March 12, 2020

Comments

Download Free Version

Download Paid Version

Keep Divi Column ratios and build aesthetically beautiful mobile layouts for the Divi Builder. View Demos to see what can be done using this plugin.

Regular Section Tutorial

After activating the CSS plugin, the next thing you do is select the row that you want and type or copy the related CSS class name in the class field for the row container.

STEP 1.

Select the Regular section

Step 2.

Select your desired row

STEP 3.

Take note of the related class name from the regular section chart for the row that you chose.

STEP 4.

Open up the Row container settings and type the class name in the CSS Class field.
CSS Class Field image

Specialty Section Tutorial

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.

STEP 1.

Select the Specialty Section

STEP 2.

Select the desired section layout

STEP 3.

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

STEP 4.

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

STEP 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 1 exception with 4.

STEP 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 Block Layout JSON

Related Posts

Add WooCommerce Cart Icon to Menu with Cart Item Count

Add WooCommerce Cart Icon to Menu with Cart Item Count

Here is a way to add WooCommerce cart icon to a menu with the cart item count, it links to the cart page and displays the number of items that have been added to the cart. The complete code uses three (3) php functions. This php code must be added to which need to be...

Close Default Open Accordion in Divi

Close Default Open Accordion in Divi

  In accordion module, first accordion is set to be open by default on opening the page. But we can close default open accordion by applying some javascript. To close the default accordion toggle, Go to Divi > Theme Option > Integration And copy the given...

1 Comments

1 Comment

  1. Carl Thomas

    Hey. I like what you did. Thanks for sharing.

    Reply

Submit a Comment

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

News & Updates

Join Our Newsletter