Limit number of items in summary block on mobile

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  ⬇️