Display blog in grid layout using Flexbox, with full width title

First we have to move the Category/Archive headline and intro text over content to add flexbox to category posts, and beautify the blog full title.

// Moving the Category/Archive Headline and Intro Text after header <br>
// This way we can add flex to category posts, and full width color under blog title
remove_action( 'genesis_before_loop', 'genesis_do_taxonomy_title_description', 15 );
add_action( 'genesis_after_header', 'genesis_do_taxonomy_title_description', 15 );

CSS to beautify the blog full title

.archive-description {
    background: #eee;
    padding: 5vw 0;
    margin: 0;
}
.archive-description h1.archive-title, .archive-description p {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 30px;
}
.archive-description h1.archive-title {
    font-size: 2.5rem;
    line-height: 1;
    padding-bottom: 20px;
}

Flexbox css to create the grid, that creates equal height grid posts, and grid is 3/2/1 as we are going down to screen resolution.

/* blog grid */

.archive #genesis-content  {
	display: flex;
	flex-wrap: wrap;
  margin: 0 -15px;
}
.archive #genesis-content  .post {
  padding: 20px;
  text-align: center;
  flex: 0 0 calc(33.33333% - 30px);
  max-width: calc(33.33333% - 30px);
  margin: 15px;
  -webkit-box-shadow: 0px 9px 50px 0px rgba(0, 102, 204, 0.1);
  -moz-box-shadow: 0px 9px 50px 0px rgba(0, 102, 204, 0.1);
  box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.1);
	border:1px solid #ccc;
	border-radius:5px;
}
@media(max-width:960px){
  .archive #genesis-content  .post {
    flex: 0 0 calc(50% - 30px);
    max-width: calc(50% - 30px); 
 }    
}
@media only screen and (max-width: 560px) {
   .archive #genesis-content  .post {
    flex: 0 0 calc(100% - 30px);
    max-width: calc(100% - 30px);
 }  
}
Scroll to Top