silvabokis

squarespace development + strategy + UX + design & build + marketing

+44 (0)7908 262225

I'm a freelance user experience consultant who delivers projects large and small for a client base that includes multinationals, SMEs, and sole traders.   
I specialise in formulating new media strategy, defining information architecture, user experience design, interaction design, prototyping, user research & testing, website and application building, and online marketing. 

Reducing the number of Squarespace summary block images on mobile devices

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

This quick tip 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 code in action on the summary block below. Initially there are nine featured stories, but on mobile this gets reduced to four.

[ scroll past the summary block to see the code] 



The CSS Code

The 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>

Alterntively, 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;
  }
}