Jump to content

Image Gallery - Is it possible to have Grid:strip style on desktop, switch to Slideshow on mobile

Recommended Posts

Howdy

The Grid: strip style at the end of the page is working really well for what the client wants, however on mobile it's a terrible format and a lot of scrolling. Any way to have the gallery turn into a slideshow on mobile only?

www.theathenapack.com

Thank you!

Link to comment
  • Replies 2
  • Views 936
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

@oldegray It can be done with some custom code. 

You can create two sections, one with strip styled grid and other one with slideshow. Then with custom code we can hide the slideshow section on desktop and strip styled grid section on mobile. Let me know if you need help with the code. Thanks! 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

I've found a solution with CSS as there is no fancy way to automatically have these two gallery styles change between mobile and desktop.  

For those curious, in edit mode:

  • I duplicated the Grid Stip gallery that I've already created
  • Then edited the duplicate to be a Slideshow Reel and designed it to be full bleed. 
  • To swap the views on desktop and mobile, I've added this code (obvs add your own section IDs):

// Hiding Grid Stip from Mobile, Hiding Slideshow Reel on Desktop
@media screen and (max-width: 641px) {
section[data-section-id="64d00f75a743de4c922d1bc3"] {
 display:none !important;
  }
}
@media screen and (min-width: 641px) {
section[data-section-id="64e3967c623c9120255befd7"] {
 display:none !important;
  }
}

 

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.