Create Custom Divi Row Column Structures For Mobile With CSS Grid

Video Description

Divi comes with a wide array of column structures for beautiful desktop designs. In this tutorial, we are going to unlock these flexible column layouts for mobile devices (phone and tablet) using responsive CSS grid. 👉 Copy the CSS snippets from the blog post: https://divimundo.com/en/blog/create-custom-divi-column-structures-in-mobile-devices-with-css-grid/ Chapters 00:00 - Intro: Row layouts in Divi 01:27 - Why you will see a false error message in the Theme Customizer when using CSS Grid with Divi 04:10 - Enable CSS Grid in Divi by adding custom CSS 05:27 - Create custom row column structures for mobile in Divi using CSS Grid 10:37 - Fixing "widow columns" using CSS Grid (force the last column to be fullwidth) 12:12 - Center-align columns vertically using CSS Grid 13:25 - Live demo: Different row structures in phone and tablet with Divi using CSS Grid 14:58 - Understanding basic CSS Grid in Divi – explaining the code Do you you miss the flexible Divi row layout options when designing for mobile? I sure do, so I decided to create a CSS grid system that allows custom column structures in ALL devices. In this tutorial, we are going to apply both equal width column structures as well as mixed column widths combinations. You don’t need any plugins and it works flawless in all modern web browsers. I hope that you will enjoy this brand new toolbox for responsive row design in Divi, the popular WordPress theme from @elegantthemes The result: Our custom column layouts library Here are the new responsive column structures that we are going to unlock for phones and tablets: Mixed Column Widths (Mobile & Tablet) 2 columns (1/3 + 2/3) 2 columns (2/3 + 1/3) 2 columns (1/4 + 3/4) 2 columns (3/4 + 1/4) 3 columns (2/4 + 1/4 + 1/4) 3 columns (1/4 + 1/4 + 2/4) 3 columns (1/4 + 2/4 + 1/4) Equal Column Widths (Mobile & Tablet) 1 column on tablet 2 columns on tablet 3 columns on tablet 4 columns on tablet 5 columns on tablet 6 columns on tablet Any questions? Let me know in the comments! ⚡ DiviMundo.com is dedicated to spread knowledge about WordPress and the Divi theme. The vision is that everyone should be able to design beautiful websites without exhausting coding issues. Read more at https://divimundo.com/en/ ⚡Get 10% off Divi here: https://divimundo.com/divi10/ (affiliate link) #divi #mobile #responsive