Skip to content

Instantly share code, notes, and snippets.

@cre8tivediva
Last active June 24, 2021 11:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cre8tivediva/8accc8de42caf8442e16f0a5d6321925 to your computer and use it in GitHub Desktop.
Save cre8tivediva/8accc8de42caf8442e16f0a5d6321925 to your computer and use it in GitHub Desktop.
Display Blog Posts in Grid on Blog Page Genesis without a Plugin
/* Create a page called Blog.
Go to Layout Settings. Add the word "blog" (without quotes) to the Custom Body Class, then Save.
Add the following code to the stylesheet or to the Additional CSS Box.
*/
/* Blog Page Grid Layout
-----------------------------------------------------*/
.blog .content .entry {
border:0;
float:left;
margin-bottom:30px;
width:50%;
}
.blog .content .entry:nth-of-type(odd) {
padding-right: 15px;
}
.blog .content .entry:nth-of-type(even) {
padding-left: 15px;
}
.blog .content .entry:nth-of-type(2n) {
float: right;
}
.blog .content .entry:nth-child(2n+1) {
clear:both;
}
.blog .content .entry-title {
font-size:30px;
margin:0 auto 25px;
padding:0;
}
@media only screen and (max-width : 480px) {
.blog .content .entry {
border:0;
float:left;
margin-bottom:30px;
width:100%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment