Hello LinaTee,
Try this custom CSS:
.site-main > article {
width: 30%;
float: left;
margin: 10px;
}
.site-main > article:nth-child(3n+1),
nav.navigation{
clear:left
}
Let us know if this solved your requirements.
Best Regards!
Acme Themes
Thank you for this code. When I use it, it does make the blogs go into 3 columns but the rest of the site is put in a single column. I just need the blog page to be in the columns.
Hello LinaTee,
Please try this custom CSS:
.blog .site-main > article {
width: 30%;
float: left;
margin: 10px;
}
.blog .site-main > article:nth-child(3n+1),
nav.navigation{
clear:left
}
Best Regards!
Acme Themes
This is exactly what I wanted on the desktop but it looks awful in mobile. Do you have a suggestion?
Hello,
Full code with mobile device supports, just past it on Appearance => Customize => Additional CSS:
.blog .site-main > article {
width: 30%;
float: left;
margin: 10px;
}
.blog .site-main > article:nth-child(3n+1),
nav.navigation{
clear:left
}
@media only screen and (max-width: 768px){
.blog .site-main > article {
width: 100%;
float: none;
margin: 0;
}
}
Best Regards!
Acme Themes
