How to Resize Images on Your Mobile-Friendly Squarespace Website (2025 Guide)
In a mobile-first world, a responsive, well-optimized website is no longer a nice-to-have — it’s a requirement. Almost 60% of all internet traffic is now occurring on mobile devices, so what your website looks like on a smartphone is just as important, if not more important, than its desktop design.
Squarespace 7.1 is developed on a responsive framework, but a common gripe among users 6 is that a layout can feel cluttered or lopsided because images look oversized or misshapen on mobile devices.
In this step-by-step tutorial, we’ll show you a solution that will allow you to resize the image blocks just for mobile and tablet device views using custom CSS, but without altering how your site appears on desktop.
Why Resize Images for Mobile in Squarespace?
While Squarespace themes automatically adjust to various screen sizes, image blocks sometimes don’t scale down effectively on smaller screens. This can lead to:
Oversized images that take up too much space
Misaligned layouts
Slower load times
A clunky user experience
By resizing your images just for mobile or tablet, you can create a cleaner, faster, and more professional experience for visitors on any device.
Step 1: Set Up Mobile and Tablet Breakpoints
To start, go to your Squarespace dashboard → Design → Custom CSS.
Now, copy and paste this CSS template into the Custom CSS box. This doesn’t change anything, yet it just sets the screen size breakpoints:
/* CSS FOR TABLET AND MOBILE */
@mobile: ~"only screen and (max-width: 640px)";
@tablet: ~"only screen and (min-width: 641px) and (max-width: 949px)";
/* CSS FOR TABLET */
@media @tablet {
/* Insert tablet-specific code here */
}
/* CSS FOR MOBILE */
@media @mobile {
/* Insert mobile-specific code here */
}
What does this do?
The mobile rule targets screens 640px wide or less (phones).
The tablet rule applies to screens 641px to 949px wide.
Now you can apply specific styles within each section.
Step 2: Resize All Image Blocks for Mobile
To scale down all image blocks on mobile devices, paste the following code inside the @media @mobile section:
.sqs-block-image {
width: 80%;
margin: 0 auto;
}
This will:
Shrink all image blocks to 80% width
Center them on the screen with auto margins
Tip: Adjust the 80% value as needed for your design (e.g., 70% or 90%).
Optional: Resize Images on a Specific Page Only
Want to resize images on just one page? You can target that page specifically using its unique ID.
Here’s how:
#nameofpage .sqs-block-image {
width: 80%;
margin: 0 auto;
}
How to find your page name or ID:
Use the Squarespace ID Finder Chrome extension
Or inspect the page using Chrome Developer Tools (right-click → Inspect)
This code ensures image resizing only applies to that specific page.
Optional: Resize a Single Image Block Only
Sometimes, you may only want to resize one specific image, not all images on a page.
Here’s how:
Find the unique block ID of the image using:
Chrome Developer Tools (Inspect)
The Squarespace ID Finder browser extension
Then use this CSS:
#blockidnumber {
width: 80% !important;
margin: 0 auto;
}
This CSS will resize only the targeted image block and leave all others unaffected.
Want to Resize Product Images?
Note: If you’re working with product images in Squarespace Commerce, you’ll need a different set of CSS rules specifically for product page or grid styling.
Final Thoughts
By enabling the CSS snippets above, you can control how your Squarespace site appears as you scroll on mobile, including all image blocks site-wide to certain pages or single images. These small adjustments equate to a better user experience, quicker loading times, and a possible uptick in search engine standing as a result of improved mobile optimization.
FAQ: Resizing Images for Mobile in Squarespace 7.1
1. Why do images look oversized or misaligned on mobile in Squarespace?
Although Squarespace 7.1 uses a responsive framework, image blocks may scale inconsistently due to default padding, grid spacing, or large image dimensions. Without custom adjustments, this can lead to overly large visuals, broken layouts, or awkward alignment on smaller screens.
2. Is it safe to use custom CSS to resize images in Squarespace?
Yes. Squarespace allows safe use of Custom CSS under Design → Custom CSS. The changes are non-destructive, reversible, and don't affect the Squarespace editor or core files. Just be cautious to testing your CSS across devices after applying it.
3. What screen sizes do the mobile and tablet breakpoints target?
In the blog’s CSS setup:
Mobile: Devices with screen widths ≤ 640px
Tablet: Devices between 641px and 949px
This covers most smartphones and tablets for responsive control.
4. How do I resize images only on mobile without affecting desktop?
Wrap your CSS inside the mobile media query:
@media only screen and (max-width: 640px) {
.sqs-block-image {
width: 80%;
margin: 0 auto;
}
}
This ensures your changes apply only on mobile and keep desktop views untouched.
5. Can I resize images on just one Squarespace page?
Yes. Use the page’s unique ID or class:
#page-id .sqs-block-image {
width: 80%;
}
You can find the page ID by inspecting the body tag with Chrome Developer Tools or using the Squarespace ID Finder Chrome extension.
6. How do I resize a single image block only?
Inspect the image block, copy its unique block ID (e.g., #block-yui_3_17_2_1_...), and apply CSS:
#block-yui_3_17_2_1_123456 {
width: 80% !important;
margin: 0 auto;
}
This targets only that image, without affecting others on the same page.
