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.

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

/* - - Fullscreen - - */
@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
}
}
- - -
❤️ Like this tutorial? Buy me a coffee to say thanks! ☕ [ Ссылка ]
⭐ NEW: List of my top 7 FREE Squarespace tutorials: [ Ссылка ]
📑 Download my collection of CSS codes for Squarespace at [ Ссылка ]
🙋 Need some help? Visit ​[ Ссылка ] to see my current support options.
- - -
💻 WEBSITE → [ Ссылка ]
📧 NEWSLETTER → [ Ссылка ]
🤳 INSTAGRAM → [ Ссылка ]
👍 FACEBOOK → [ Ссылка ]
📌 PINTEREST → [ Ссылка ]
- - -
💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸 Use my affiliate link and code INSIDE10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎 🔗 INSIDE10 → [ Ссылка ]
- - -
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥

свернуть