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.
Worked perfectly! Thanks for the great tutorial.
Tawfiqur / Mary
I can’t seem to get this to work correctly, any help?
this is the page I am trying to style:
https://stage.dreamsyndicate.com/projects/
thanks
lk
Thank you for this tutorial! Unfortunately it’s not working like it’s supposed to with me. The total width of 47% and 6% makes the second column get under the first. When I change the margin to 3% they do stay in one row, but there still is a margin on the right side. I hope you can help me out?
Thanks