How to resize product images on Squarespace 7.1 for mobile screens

This tutorial will guide you through the process of resizing product images specifically for mobile screens on Squarespace 7.1. While Squarespace generally adjusts your website for different screen sizes automatically, the drawback is that the rendering on mobile screens is dynamic, and you may not have precise control over the design without using custom code. By following the steps provided in this tutorial, you will be able to intervene and customise the sizing of your product images for mobile screens, ensuring optimal display and a seamless user experience on Squarespace 7.1.

Complexity: Easy

To resize product images on Squarespace 7.1 for mobile screens, simply copy the code below:

Mobile Breakpoints

/* CSS FOR TABLET */
@media only screen and (min-width: 641px) and (max-width: 949px)) {
/* Start Insert Code for Tablet*/


/* End Insert Code for Tablet */
}

/* CSS FOR MOBILE */
@media only screen and (max-width: 640px) {
/* Start Insert Code for Mobile*/



/* End Insert Code for Mobile*/
}

Use this code to resize Product images

.products .grid-image {
width: 85% !important;
margin: 0 auto;
}

A full working example, is shown below, which you will paste in your Design > Custom CSS.

/* CSS FOR TABLET */
@media only screen and (min-width: 641px) and (max-width: 949px)) {
/* Start Insert Code for Tablet*/

.products .grid-image {
width: 85% !important;
margin: 0 auto;
}

/* End Insert Code for Tablet */
}

/* CSS FOR MOBILE */
@media only screen and (max-width: 640px) {
/* Start Insert Code for Mobile*/

.products .grid-image {
width: 85% !important;
margin: 0 auto;
}

/* End Insert Code for Mobile*/
}

You can also look at our other posts.

How to optimise your Squarespace website 7.1 for mobile screens
How to resize product images on Squarespace 7.1 for mobile screens