How to reduce the height of the Gallery Slideshow Reel on mobile in Squarespace (7.1)

• 00
• 01
• 02
• 99

Gallery Reels can be a pretty easy way to create an immersive image carousel in your client's site, but more often than not they can become a problem on mobile when they're too tall to allow more content to show, or for the slide images to be seen in full.

If that's what you're dealing with right now, then today’s tutorial is for you!

We'll be looking at how you can quickly and easily shrink down any Gallery Reel you may have in your Squarespace project, only on mobile devices.

So, if you’re interested in learning how to achieve this, jump right into the video!

Tutorial

Overview & timestamps

1. 00:00 – Intro

2. 01:30 – Looking into how Squarespace is setting the original height of the Gallery Reel
   Before jumping into the Custom CSS window, we first need to know how the initial height from our settings is being applied. Finding out both which container is being affected and what property is being used is necessary in order to override things on mobile or any other screen size.

3. 05:04 – Shrinking down the height on mobile only
   After landing on the corresponding container and deciding on the new height, we’ll need to create a media query around the code to make sure it only applies to mobile screens.

4. 06:10 – What to do if you want to apply the customization to one specific Gallery Reel section
   Last but not least, in case the change needs to happen for only ONE gallery reel across your Squarespace project, we’ll take a few seconds to look into how the selector would need to be modified.

And that’s it!

As simple as that you now know how to tackle this “issue” on your own site or your client’s, with just a few lines of CSS.

Until next time,

B.

---

Full code

/*HOW TO REDUCE THE HEIGHT OF THE GALLERY SLIDESHOW REEL ON MOBILE IN SQUARESPACE (7.1)*/
@media screen and (max-width: 767px) {
  .gallery-reel {
    height: 30vh !important;
  }
}