I want 10 blog posts to come up on mobile, but only 8 to come up on the desktop version.

Site URL: https://www.recaprabbithole.com/

I want the most recent 10 blog posts to come up on mobile, but only 8 to come up on the desktop version (as they do now - Its currently 8 on web and mobile). What CSS do I use to make this happen?

Hi @RecapRabbitHole

Navigate to your Blog Settings and increase the number of posts per page to 10 (see attached).

then paste this code in Custom CSS

@media(max-width: 767px) {
    .blog-basic-grid article.entry.blog-item:nth-child(9), 
    .blog-basic-grid article.entry.blog-item:nth-child(10) {
        display: none;
    }
}

let me know if you still have any confusion.

Hi @moeezali

Unfortunately this gives me the inverse of what I would like.

Currently I have:

• 8 Blog posts displayed on Web
• 8 Blog posts displayed on  Mobile. 

I want:

• 8 Blog posts displayed on Web
• 10 (n) Blog posts displayed on  Mobile. 

(n) - being a variable I can change. 

Sorry about that, I don't think my wording was very clear to begin with. 

I think your code should be:

@media(min-width: 760px)  {
    .blog-basic-grid article.entry.blog-item:nth-child(9), 
    .blog-basic-grid article.entry.blog-item:nth-child(10) {
        display: none;
    }
}

This code, with my change, gives me the desired result. Thanks! your code did the heavy lifting. 

Great Job!