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

mobile

Mar 28

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.

Important Info: Squarespace has rearranged our menus, so the way we add code to Squarespace has changed (pages > website tools > custom CSS) but the code from this tutorial and the technique itself still works!

Here are the codes from this tutorial.

Update the values to match your own unique site design.

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

.gallery-reel-item{
height: inherit!important
}
}

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

/* - - 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
}
}

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

How to add this code to Squarespace

The preferred method is to add code to your CSS panel. You’ll find it by navigating to pages under your website menu, then selecting website tools, then custom css.

Be advised that the location and labels inside the Squarespace menu can change. To quickly locate your CSS panel, you can press the / button on your keyboard to open up the program search feature. This search feature is for Squarespace program menus, and will not search the content of your site. Look for Custom CSS and you’ll be taken directly to the CSS panel.

To apply custom code to an individual page on your website, check out this resource article for more info: tutorials.squarespace.com/resources/install-code