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

/* - - Show Thumbnails - - */

@media only screen and (max-width:767px) {
.gallery-slideshow-thumbnails {
display: inline!important
}
}

There you have it! Try these codes out to help customize the mobile user experience on your Squarespace site.