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

Use this code to resize Products image

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

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