Summary Block (Carousel): Increase Number of Items Per Row

I'm using a summary (carousel) block on my homepage along with the Lazy Load plugin set to randomize for more than 30 items. This all works great. But I would like to be able to have somewhere between 6-8 items display per row, instead of the default max of 5 per row.

Can you share your website URL?

Hey @Ziggy, Just curious - why is it I always add my domain in the URL field when creating a post but it doesn't display???  Anyways, sorry. here you go: https://liftin.me

35 minutes ago, jmerrill said:

why is it I always add my domain in the URL field when creating a post but it doesn't display?

Not sure, it would be useful, but it is not information that is passed on in the question, you always have to add it to the post.

Try this Custom CSS:

#block-yui_3_17_2_1_1698336619044_8986 .sqs-gallery-design-carousel-slide {
    width: 12.2%;
    padding-right: 1%;
    padding-left: 1%;
}

This should show 7...hopefully!

@Ziggy Added the code but no visible change to that summary block - still displaying 5 items.

Interesting, try this tweak to the code:

.sqs-gallery-design-carousel-slide {
    width: 12.2% !important;
    padding-right: 1% !important;
    padding-left: 1% !important;
}

@Ziggy There we go! Thank you. Working now. There was a tiny bit of overflow on a 9th item so I adjusted the percentages and looks great now.

Any way I could get some code to reduce the item count for tablet and mobile screens?

1 minute ago, jmerrill said:

Any way I could get some code to reduce the item count for tablet and mobile screens?

If you place that code inside a media query, we can stop it affecting the tablet and mobile view:

@media only screen and (min-width:768px) {
  .sqs-gallery-design-carousel-slide {
    width: 12.2% !important;
    padding-right: 1% !important;
    padding-left: 1% !important;
  }
}

Can you mark my post as the solution and give it a like? Thanks!

@Ziggy This is the code I now have in there now—but it's still displaying all items on mobile (with and without the block ID added in there):
 

#block-yui_3_17_2_1_1698336619044_8986
@media only screen and (min-width:768px) {
  .sqs-gallery-design-carousel-slide {
    width: 12.2% !important;
    padding-right: 1% !important;
    padding-left: 1% !important;
  }
}

@Ziggy Perfect! Thank you!

Just now, jmerrill said:

Perfect! Thank you!

Happy to help, thanks for marking my post as the solution, appreciated!