Divi allows us to create truly unique website and pretty decent blog pages but some stuff you can’t use the page builder on like category pages and the archive, the reason that this is a problem is because it leaves your website looking inconsistent, which is not very professional so today I’m going to show you how to makes these pages have the grid blog style.
First you thing you will need to decide is if you want these pages to be fullwidth or if you would like a sidebar on these pages, if you want a sidebar you can scroll down to column section.
Removing sidebar:
.archive #sidebar, .category #sidebar, .blog #sidebar {
display: none;
}next we are going to remove the sidebar line from our pages.
.archive #main-content .container:before, .category #main-content .container:before, .blog #main-content .container:before {
display: none;
}Making content area full width:
Now that we’ve removed the sidebar there is a massive space where the sidebar used to be, we will need to extend our content area into that space.
.archive #left-area, .category #left-area, .blog #left-area {
width: 100%;
padding-right: 0px;
}3 Column layout (fullwidth):
.archive .et_pb_post, .category .et_pb_post, .blog .et_pb_post {
background-color: #fff;
padding-left: 2%;
padding-right: 2%;
padding-top: 2%;
padding-bottom: 2%;
width: 28%;
margin-right: 2.5%;
margin-left:2.5%;
float: left;
}2 Column layout (sidebar):
If you chose to keep your sidebar you will only need the following code make your post display as a grid on those pages.
.archive .et_pb_post, .category .et_pb_post, .blog .et_pb_post {
background-color: #fff;
padding-left: 2%;
padding-right: 2%;
padding-top: 2%;
padding-bottom: 2%;
width: 45%;
margin-right: 5%;
float: left;
}Responsive time
Next we will need to make sure our grid stay responsive on mobile devices, I’m going to make both 3 and 2 columns become 2 columns on tablets and 1 one column on mobile phones.
/* landscape Tablets */
@media ( min-width: 981px ) and ( max-width: 1099px ) {
.archive .et_pb_post, .category .et_pb_post, .blog .et_pb_post{width:45%!important; margin-right:2.5%;margin-left:2.5%;}
}
/* Portrait Tablets*/
@media ( min-width: 768px ) and ( max-width: 980px ) {
.archive .et_pb_post, .category .et_pb_post, .blog .et_pb_post{width:45%!important; margin-right:2.5%;margin-left:2.5%;}
}
/* Landscape Phones */
@media ( min-width: 480px ) and ( max-width: 767px ) {
.archive .et_pb_post, .category .et_pb_post, .blog .et_pb_post{width:95%!important; margin-right:2.5%;margin-left:2.5%;}
}
/* Portrait Phones */@media ( max-width: 479px ) {
.archive .et_pb_post, .category .et_pb_post, .blog .et_pb_post{width:95%!important; margin-right:2.5%;margin-left:2.5%;}
}If you want it on just a category or archive page, you will just need to remove either .archive, .category or .blog to every CSS item we have added, personally, I think it best to apply the style to all blog pages.
Hope you find this tutorial useful 🙂
