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);
}
}