Jump to content

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

Recommended Posts

  • Replies 2
  • Views 234
  • Created
  • Last Reply

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.

Screen Shot 2020-05-14 at 3.20.37 AM.png

Link to comment

Hi @moeezali

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

Currently I have:

  • 8 Blog posts displayed on Web
  • 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!

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.