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'll be able to intervene and customize 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 Products image

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

For a full working example which you will paste in your Design > Custom CSS is shown below:

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