Showing 2 images side by side in gallery

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: 

Thanks

M

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?

Hi Ziggy, sure here you go: 

https://helix-deer-dlr6.squarespace.com/before-after

Thanks

Maisie

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.

Okay thanks Ziggy, I will give this a go. What would be the code to hide gallery for mobile and gallery for desktop?

Thanks

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!

Amazing thank you so much 🙂