Support homeless elderly living in San Diego

$34k of $50k Goal

How to Keep Divi Columns in Mobile View Using CSS

Posted On April 27, 2020

[dsm_gradient_text gradient_text=”Download Main CSS code and paste into your Divi Theme Custom CSS” _builder_version=”4.4.1″ header_level=”h2″][/dsm_gradient_text]
[caldera_form id="CF5e6ac396af22d"]

 

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

[dsm_gradient_text gradient_text=”Regular Section” _builder_version=”4.4.1″ header_level=”h2″][/dsm_gradient_text]
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.
[dsm_gradient_text gradient_text=”Specialty Section” _builder_version=”4.4.1″ header_level=”h2″][/dsm_gradient_text]

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.

[dsm_gradient_text gradient_text=”Download Colour Layout” _builder_version=”4.4.1″ header_level=”h2″][/dsm_gradient_text]
[dsm_button button_one_text=”Specialty” button_one_url=”https://kerjemtec.com/wp-content/uploads/2020/03/Specialty-Section-Colour-Layout.zip” _builder_version=”4.3.2″ custom_button_one=”on” button_one_text_color=”#ffffff” button_one_bg_color=”#ff9233″ background_layout=”dark”][/dsm_button]

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 *