How to optimise your Squarespace website 7.1 for mobile screens

Designing a great website isn’t just about how it looks on desktop — mobile optimisation is essential. With over half of all web traffic now coming from mobile devices, ensuring your Squarespace 7.1 site performs well on smaller screens is critical for user experience and SEO.

While Squarespace 7.1 includes automatic mobile responsiveness, it also allows for granular control through custom CSS. In this tutorial, you'll learn how to fine-tune your Squarespace site for optimal mobile performance with a few simple but powerful tweaks.

A useful tool you can use to identify the #collection-id and #blockidnumber is a Chrome Extension called Squarespace Collection/Block Identifier.

Table of Contents

• Why Mobile Optimisation Matters

• Step-by-Step Instructions

• Key Takeaways

• FAQs

• Conclusion

Why Mobile Optimisation Matters

• Improved User Experience: Mobile-friendly designs are easier to navigate and interact with.

• Faster Load Times: Streamlined layouts load faster, reducing bounce rates.

• Enhanced Usability: Clear typography and responsive images improve usability.

• Higher SEO Rankings: Google uses mobile-first indexing, so a well-optimised mobile site improves visibility in search results.

Complexity: Intermediate

Step-by-Step Instructions

To optimise your Squarespace website 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 resizing Image Blocks Site-Wide

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

Use this code to resizing Image Blocks on a Specific Page

#collection-id .sqs-block-image {
width: 85%;
margin: 0 auto;
}

Use this code to resizing Image Blocks in a Specific Section

#collection-id {
#page .page-section:nth-of-type(1) {
.sqs-block-image {
width: 85%;
margin: 0 auto;}
}
}

Use this code to resize a Specific Image

#blockidnumber {
width: 85% !important;
margin: 0 auto;
}

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

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

/**Use this code to resizing Image Blocks Site-Wide**/

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

/* End Insert Code for Tablet */
}

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

/**Use this code to resizing Image Blocks Site-Wide**/

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

/* End Insert Code for Mobile*/
}

Key Takeaways

• Use media queries to tailor design for tablets and mobile screens.

• Resize image blocks using site-wide, page-specific, or block-specific CSS.

• Keep mobile layouts clean, minimal, and touch-friendly.

FAQs

Q: Will these CSS changes affect my desktop layout?
A: No. All mobile-specific code is wrapped inside media queries, so it only applies to the screen sizes defined.

Q: How do I find my collection ID or block ID?
A: Use the Squarespace ID Finder Chrome Extension to locate your collection and block IDs quickly.

Q: Do I need developer mode enabled for this?
A: No. You can use the built-in Custom CSS editor in Squarespace 7.1 — no developer mode needed.

---

---

Conclusion

Although Squarespace 7.1 provides a responsive foundation, taking control of your site’s mobile layout ensures that every user has a smooth and engaging experience — no matter what device they use.

With just a few CSS adjustments, you can:

• Improve usability

• Create faster-loading mobile pages

• Align your site more closely with your brand’s visual identity