Jump to content

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

Recommended Posts

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

Edited by AbbyAbbyAbby
Link to comment
  • Replies 1
  • Views 297
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.