Resize Gallery Blocks for Mobile on Squarespace

Responsive DesignSquarespace 7.0Squarespace 7.1
Written By Rebecca Grace

We know having a mobile-friendly website is super important for any business. Not only do search engines rank these sites higher but you could be losing potential clients if they find your site too hard to navigate when looking from their mobile device.

Squarespace does a good job of altering your website for different screen sizes. However, they do not yet offer a way for you to resize gallery blocks while on mobile.

This video shows you how to resize gallery blocks when your website is being viewed from a mobile or tablet device. All of the code used in the video is provided below.

 
 

The following code is used in the video.

Mobile and Tablet Breakpoints

/* CSS FOR TABLET AND MOBILE */
@mobile: ~"only screen and (max-width: 640px)";
@tablet: ~"only screen and (min-width: 641px) and (max-width: 949px)";

/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/

/* Insert Code for Tablet Above This Line */
}

/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/


/* Insert Code for Mobile Above This Line */
}

Resizing Gallery Blocks

.sqs-block-gallery {
  width: 70%;
  margin-right: auto;
  margin-left: auto;
}
 
 
Rebecca Grace

Rebecca Grace is a Squarespace CSS Expert and Website Designer.

https://rebeccagracedesigns.com
Previous

Animated Gradient Text on Squarespace
Next

Create a Fixed Header in Squarespace 7.0 and 7.1