Jump to content

Limit number of items in summary block on mobile

Go to solution Solved by paul2009,

Recommended Posts

Site URL: https://openingnights.co.uk

Example page in question: https://www.openingnights.co.uk/news/archive/sweet-mother-returns-to-stage-following-arts-council-england-funding-success

Hi,

I'm looking to limit the amount of items in a summary block on mobile

If I have it set to 6 items for desktop, I only want to show 2 on mobile.

Thank you for any help in advance

Edited by likemindedproductions
Unfinished question
Link to comment
  • Solution
17 minutes ago, likemindedproductions said:

I'm looking to limit the amount of items in a summary block on mobile. If I have it set to 6 items for desktop, I only want to show 2 on mobile.

As your Summary Block is showing 6 items on desktop, you'll want to hide the last 4 summary-items when the screen viewport (width) is less than 768px wide. You should be able to do this by adding the following to Design > Custom CSS:

@media only screen and (max-width: 767px) {
  .sqs-block-summary-v2 {
    .summary-item:nth-last-child(-n+4) {
      display: none;
    }
  }
}

Notes:

  • This will apply to all summary blocks on the website when being viewed on a mobile. 
  • The first line contains a media query that ensures the the CSS only applies when the page is viewed on a mobile (the screen is less than 768px wide).
  • Setting Display to none hides the elements and removes the space that they would have occupied.
  • The nth-last-child(-n+4) selector tells it to apply this setting to last 4 summary-items within the summary block. 

We like to know if our posts help. Please consider clicking a 'Like' or 'Thanks' icon below  ⬇️

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.