How to resize images on Squarespace 7.1 for mobile screens

In today's digital landscape, having a mobile-friendly website is no longer optional—it's essential. A responsive design not only improves user experience but also plays a significant role in SEO. Search engines like Google prioritize mobile responsiveness when determining rankings, evaluating how well your website adapts to smaller screen sizes.

Table of Contents

• Why Resize Images for Mobile

• Step-by-Step Instructions

• Key Takeaways

• FAQs

• Conclusion

Why Resize Images for Mobile?

While Squarespace 7.1 automatically scales your content across devices, the built-in responsiveness doesn’t always give you full control—especially when it comes to images. Oversized images on mobile can:

• Slow down your site’s loading speed

• Disrupt the layout and alignment

• Create a poor visual experience for users

With a few lines of custom CSS, you can tailor image sizing specifically for mobile, improving design and performance.

Complexity: Easy

---

Step-by-Step Guide: Resize Images for Mobile

Step 1: To resize 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 image

.sqs-block-image {
width: 85% !important;
margin: 0 auto;
}

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

.sqs-block-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*/

.sqs-block-image {
width: 85% !important;
margin: 0 auto;
}

/* End Insert Code for Mobile*/
}

---

Key Takeaways

• Squarespace 7.1 scales images automatically, but not always optimally for mobile.

• Using a mobile-specific media query allows you to resize images with precision.

• Targeting individual image blocks gives you the most design flexibility.

FAQs

Can I use this for gallery images too?
Yes, though you may need to inspect and target the gallery’s image class specifically.

Will this affect desktop layout?
No. The media query ensures that changes only apply to screens 640px wide or smaller.

Can I control padding/margin as well?
Absolutely—add CSS rules for padding and margin within the same media query block.

---

---

Conclusion

Customising image sizes for mobile screens in Squarespace 7.1 ensures your site remains clean, fast, and user-friendly—especially on small devices. With just a bit of targeted CSS, you can gain full control over your image presentation and deliver a polished experience across all screen sizes.

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