Code to ensure rows in gallery display only 1, 2 or 3 items (no more).

Site URL: https://www.thecastingcompany.co.nz/our-work

Hi community,

Because gallery blocks can only display up to 30 items, I am using 2 x gallery blocks to display a large portfolio of work, inserted next to each other on one page.

However, depending on the screen size or device a user is viewing the site on, the last row of the first gallery has gaps (it's fine if there is 1 column like on mobile, or 2 or 3 on desktop, but issues when there are 4 columns because its not divisible by 30).

Is there code I can inject to ensure that no matter what screen size or device someone is using that the gallery blocks display the items as 1, 2, 3 or 5 items per row? Or that it has 3 columns on desktop and tablet and 1 column on mobile? Alternatively, code that restricts the gallery blocks from displaying 4 x items per row (or 4 columns) would be great.

I have found some similar queries on the forum but nothing makes a change to my site.

Thank you for any assistance you can share!

Abby

Add to Design > custom CSS

/* desktop tablet 3 items row */
@media screen and (min-width:641px) {
body#collection-5fd7d2d420ec2014b412888d {
.summary-item {
    width: 30.1205% !important;
    margin-bottom: 4.81928% !important;
    margin-right: 4.81928% !important;
    clear: none !important;
}

.summary-item:nth-child(3n) {
    margin-right: 0 !important;
}

.summary-item:nth-child(3n+1) {
    clear: left !important;
}
}}