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

This is possible, can you share your website URL?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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 helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? 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 helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? 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.