All Collections
FAQ's and Troubleshooting
Change Blog Module Columns number
Change Blog Module Columns number

Show 2, 4, 5 posts in a row with the blog module instead of the default 3.

Cristi avatar
Written by Cristi
Updated over a week ago

By default, the blog module shows 3 posts in a row when there's no sidebar in the page:

If you want to change that to 4 posts for example, follow these steps please:

1- First, make sure you use the grid layout of the Blog Module:

2- Add the cu-blog class to the blog module as seen here:

3- Add this code in Dashboard => Divi => Theme Options => Custom CSS:

@media (min-width: 980px) {
.cu-blog .et_pb_salvattore_content[data-columns]::before {
content: '4 .column.size-1of4' !important;
}
@media only screen and ( min-width: 981px ) {
.cu-blog .column.size-1of4 {
   width: 24%!important;
   margin-right: 1%;
}
}}

Result:

Change the columns number to a different number

If you want 2 or 5 posts in a row follow the above instructions with the following changes in the CSS code:

content: '4 .column.size-1of4' !important;


The number 4 should be changed to the posts number you would like to show in a single row. Same thing goes with the following line which you can find it twice in the code:

.cu-blog .column.size-1of4

 
Next you need to adjust the width for each post in this code:

width: 24%!important;
margin-right: 1%;


Feel free to play with the width value (the width of each post) and the margin (space between posts) as needed.

Did this answer your question?