How To Change The Size Of A Squarespace Gallery Section On Mobile

Mar 28

This tutorial was recorded in Squarespace 7.1 and will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes

More and more people are accessing the internet from their mobile devices, so it's important that your Squarespace website looks great on all screen sizes. By default, Squarespace galleries may not display perfectly on smaller screens, but don't worry; I've got you covered!

In this tutorial, you’ll learn how to modify your gallery section size for mobile devices using CSS.

The codes are below the video, but there are a few parts you might want to change so be sure to watch the step-by-step tutorial first.

Here are the codes:

Change Gallery Reel

/* - - Gallery Reel - - */
@media only screen and (max-width:767px) {
.gallery-reel{
height:50vh!important
}
.gallery-reel-item{
height: inherit!important
}
}

Change Full Screen

/* - - Fullscreen - - */
@media only screen and (max-width:767px) {
.gallery-fullscreen-slideshow{
height: 30vh!important
}
}

Change Slideshow

/* - - Simple Slideshow - - */
@media only screen and (max-width:767px) {
.gallery-slideshow-item-wrapper, .gallery-slideshow-item img{
width: 100vw!important;
object-fit: cover;
left: 0!important
}
}

Change Thumbnails