Remove the first “big post” from the category page

  • Resolved mikeaustria

    (@mikeaustria)


    4 years, 7 months ago

    old post

    .archive #content .post:first-child {
    float: left;
    width: 48.7013%;
}
.archive #content .post:nth-child(2n+1) {
    float: left;
    clear: both;
}
.archive #content .post:nth-child(2n) {
    float: right;
    clear: none;
}

    The code works perfectly in the desktop view.
    In the mobile view, however, the first post is only displayed in half width. It doesn’t look nice.
    Is there a better solution for the mobile view?

    Thank′s Mike

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • @mikeaustria

    Can you add below CSS code to Additional CSS box and check?

    @media only screen and (max-width: 767px) {
    .archive #content .post:first-child {
      width: 100%;
    }
}

    Thanks.

    Thread Starter mikeaustria

    (@mikeaustria)

    @nitushrestha10

    Thank you, I found your answer in an old post. The 767px fit even better than the 600px in the old post (-; Now it’s perfect with the following code:

    THANK YOU!!!

    
.archive #content .post:nth-child(2n) {
    float: right;
    clear: none;
}
.archive #content .post:nth-child(2n+1) {
    float: left;
    clear: both;
}
.archive #content .post:first-child {
    float: left;
    width: 48.7013%;
}
@media (max-width: 767px) {
    .archive #content .post:first-child {
        width: 100%;
    }
}

    @mikeaustria

    Do let us know if you have any further queries regarding the theme.

    Thanks.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Remove the first “big post” from the category page’ is closed to new replies.