Jump to content

Adding and removing images from gallery based on devices viewed on

Recommended Posts

Please see the image attached.

- The section with images is a gallery block

- First text block is actually a jpg image.

- I would like gallery to display four images including the first text image when the page is viewed on anything that is 993px or higher

- Display six images, including the first text image, when it's viewed on anything that is 992px or lower.

 

Any help would be appreciated. Thanks.

 

 

Screenshot 2022-11-26 at 16.58.07.png

Link to comment

Hoping this does what you want, add to your Custom CSS:

@media only screen and (max-width:992px) {
  .gallery-grid-item:nth-child(n+7) {
    display:none;
  }
}

Let me know if that works.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

Yes, you can add the page identifier before the previous code, like this:

#collection-601e9d14f944e970154cf0cf {
  @media only screen and (max-width:992px) {
    .gallery-grid-item:nth-child(n+7) {
      display:none;
    }
  }
}

Click the thumbs up if this worked for you, thanks! ↓↓↓

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

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.