Jump to content

Showing 2 images side by side in gallery

Recommended Posts

Hi, my client would like images of before & after of an interior design project to be seen side by side to then scroll onto the next pair of before and after images. But then on mobile view one image at a time. I have tried a gallery slideshow reel but doesn't have the desired effect. 

Password: L0max&chi1

Mock up of how we would like it to look on desktop: 

image.thumb.png.44023d7b1dc3e6f3e6ffafd35d339dc4.png

image.thumb.png.ca8995c9b17b344bca6ccdfd0dff472e.png

Thanks

M

 

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Can you share your website URL? (I realise that you entered it when you posted the question, but it doesn't come through where I can see it) @Sarah_SQSP Can the website entered be included in the post?

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

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

 Did I help? Buy me a coffee?

Link to comment

Thanks for sharing that. 

I'm not aware of a way to set up a gallery to scroll images in pairs.

One solution may be to combine the before/after into one image for desktop, and then have two galleries one for desktop and one for mobile, and hide them with CSS and a couple of media queries. Not a perfect setup, and takes more management but it does work well for the website user.

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

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

 Did I help? Buy me a coffee?

Link to comment

I would just use the block IDs for the two galleries, Custom CSS along these lines:

// Hide mobile gallery on desktop
@media only screen and (min-width:768px) {
  #block-id-mobile-gallery {
    display:none;
  }
}

// Hide desktop gallery on mobile
@media only screen and (max-width:767px) {
  #block-id-desktop-gallery {
    display:none;
  }
}

Hope that helps!

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (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.