How to create one large latest image and a 3 column grid underneath?

Activello
1

Hello,

I’ve scoured the forums and haven’t come across anything to answer my question.

I’ve seen used the code to make one large image with the second one being smaller and floating with the others in a two column grid. I’ve changed the percentage of the grid from 50 to 30 percent, but it stays as a two column grid. Is there a way to make it be three columns? I can’t seem to get the third excerpt to float up.

Thank you.

2

Hi @hmulholland,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS


@media (min-width: 768px){

    body.blog #main.page-1 article.post:nth-child(1) {
    width: 100%;    
    }

body.blog #main.page-1 article.post {
    width: 30%;
    float: left;
    clear: left;
    padding-right: 15px !important;
}

body.blog #main.page-1 article.post:nth-child(2) .post-inner-content{
  border-bottom: 0;
  margin-bottom: 0;
  padding-top:0;
}

.blog.home #main article.post:nth-child(odd) {
    clear: none;
    padding-right: 25px !important;
    padding-left: 25px !important;
}

.blog.home #main article.post:nth-child(2n+2) {
    clear: none;
    padding: 0 !important;
}
.blog.home #main article.post:nth-child(3n+2) {
    clear: left;
}

}

Best Regards,
Movin

3

That worked, thank you!

4

You are most welcome here :slight_smile: