How to Keep Divi Columns in Mobile View Using CSS

March 12, 2020

Comments

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.

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

2 Comments

2 Comments

  1. Yalova Veteriner

    There’s definately a lot to find out about this topic. I like all of the points you made. Great blog here, Also your site loads up fast.

  2. Veteriner

    That is a good tip particularly to those new. Simple but very precise information? Thank you for sharing this one. A must read article.

News & Updates

Join Our Newsletter

[caldera_form id=”CF59c8d8a75c5cd”]