Reducing the number of Squarespace summary block images on mobile devices

More in Plugins, Scripting and Styling

Squarespace automatically adapts your layout for different screen widths but this can lead to some very long page lengths on mobile devices. 

This free css plugin optimises Squarespace page lengths by reducing the number of summary block entries on mobile devices . 

If you're using a computer, try reducing your browser width and you'll see the plugin code in action on the summary block below. Initially there are seven featured stories, but on mobile this gets reduced to four.

[ scroll past the summary block to get the free plugin code] 

---

---

The CSS Plugin Code

The plugin code below should be added to your global custom css and will reduce the number of displayed summary block entries to 4 on mobile devices for ALL summary blocks on your site. 

@media (max-width: 640px) {
  .summary-item-list .summary-item:nth-child(n+5) {
    display: none;
  }
}

For finer control you could insert the folowing css onto a specific page's code injection point. 

<style>
@media (max-width: 640px) {
  .summary-item-list .summary-item:nth-child(n+5) {
    display: none;
  }
}
</style>

Alternatively, you could insert code based on the following into your global custom css but modify it to target specific summary blocks. 

@media (max-width: 640px) {
  #[specific-block-id] .summary-item-list .summary-item:nth-child(n+5) {
    display: none;
  }
}