Reducing the number of Summary items

Six or more summary images looks nice when viewed on a desktop screen. But on a mobile phone those images turns into scrolling hell. Here’s how to reduce the number of displayed summary thumbnails on a small screen.

/* LIMIT DISPLAY OF SUMMARY ITEMS
- - - - - - - - - - - - - - */
@media (max-width: 480px) {
  #hem-kalender {
  .summary-item-list .summary-item:nth-child(n+3) {
    display: none;
    }
  }
}

The code above restricts the number of shown summary items on the #hem-kalender index section on all devices with a screen size smaller than 480px. Change the (n+3) part to your liking. More on the nth-child syntax here.

Original code comes from the Squarespace expert Colin at Silvabokis