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 automatically adjusts your site for various screen sizes, you may find the mobile display of product images isn’t quite what you want. With a bit of custom CSS, you can fine-tune how your images appear on smaller devices and deliver a smoother, more polished mobile experience.
Table of Contents
Why Resize Product Images on Mobile?
Squarespace’s responsive design works well in many scenarios, but product images can often appear too large or too small on mobile devices. This can lead to:
Slower page loading
Cropped or distorted images
A disjointed browsing experience
Resizing product images manually ensures they are visually appealing, easy to scroll through, and properly scaled across all mobile devices.
Complexity: Easy
Step-by-Step Instructions
Step 1: To resize product images on Squarespace 7.1 for mobile screens, from the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste 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
.sqs-block-summary-v2 .summary-thumbnail-container img {
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*/
.sqs-block-summary-v2 .summary-thumbnail-container img {
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*/
.sqs-block-summary-v2 .summary-thumbnail-container img {
width: 85% !important;
margin: 0 auto;
}
/* End Insert Code for Mobile*/
}Key Takeaways
Squarespace 7.1 is responsive, but manual control via CSS helps fine-tune image sizing on mobile.
Use media queries to target mobile screens and resize images.
Test your changes on multiple devices to ensure consistency.
FAQs
Can I resize product images without code in Squarespace 7.1?
Not precisely. While image blocks can be resized manually, product images in shops require custom CSS for screen-specific adjustments.
Will this affect desktop display?
No. The @media query ensures changes apply only to screens under 640px wide.
Can I set different sizes for different product images?
Yes, but you'll need to add unique CSS classes or target specific product blocks individually.
Conclusion
Customizing product image sizes for mobile screens in Squarespace 7.1 helps maintain a polished, professional look across all devices. While Squarespace’s built-in responsiveness is great, a little extra control through CSS can greatly enhance your mobile shopping experience. Don’t hesitate to tweak and test until it looks just right.
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
