How to Style Your Divi Blog Page into Two-Column Grid Layout

How to Style Your Divi Blog Page into Two-Column Grid Layout

Add a Standard Section and insert a fullwidth column.

Click to edit the Section Settings and, under General Settings, change the following:

Under Custom CSS add the following:

CSS Class: tr_two_col

 

Save & Exit

Implementing the Two-Column Grid Layout

By default, the blog grid has a three-columnn grid layout. To change this to a two-column layout, go to Divi → Theme Options and add the following CSS in the Custom CSS box:

@media only screen and ( min-width: 980px ) {
.tr_two_col .et_pb_column .et_pb_salvattore_content[data-columns]::before { content: '2 .column.size-1of2' !important;
}
.tr_two_col .et_pb_column .column.size-1of2 {
width:47% !important;
margin-right:6%;
}}
@media only screen and ( max-width: 980px ) {
.tr_two_col .et_pb_column .et_pb_salvattore_content[data-columns]::before { content: '2 .column.size-1of2' !important;
}
.tr_two_col .et_pb_column .column.size-1of2 {
width:100% !important;
margin-right:0%;
}
}

 

Now your grid should be two columns for any screen size bigger than 980px. For screens less than 980px the grid will change to a single column.

1 thought on “How to Style Your Divi Blog Page into Two-Column Grid Layout”

Leave a Comment

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

Scroll to Top