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

10 Comments

10 Comments

  1. Carl Thomas

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

    Reply
  2. erotik izle

    It was fun to read your article.

    Reply
  3. Dorothea Arron Olivier

    Beeindruckend! Dies könnte einer der nützlichsten Blogs sein, die wir jemals zu diesem Thema gesehen haben. Eigentlich großartig. Ich bin auch Spezialist für dieses Thema, damit ich Ihre Bemühungen verstehen kann. Dorothea Arron Olivier

    Reply
    • Kerwin Thompson

      Vielen Dank für Ihre ermutigenden Worte. Die Mühe hat sich gelohnt.

      Reply
  4. Darcy Ilario Whit

    A excellent article, I just given this onto a colleague who was doing a analysis on this. And he ordered me lunch because I found it for him :). So let me rephrase that: Thankx for taking the time to talk about this, I feel strongly about it and enjoy learning more on this topic. If possible, as you become expertise, would you mind updating your blog with more info? It is extremely helpful for me. Darcy Ilario Whit

    Reply
    • Kerwin Thompson

      You’re welcome 🙂 Glad it was helpful. More tutorials coming soon.

      Reply

Submit a Comment

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

News & Updates

Join Our Newsletter

how-to-keep-divi-columns-in-mobile-view-using-css-kerjem-web-studio