Disable Product Image Cropping on Mobile in Squarespace
A Simple CSS Fix to Preserve Full Product Images Across Devices
The professional display of your products from a mobile is essential to succeed in eCommerce. But in Squarespace 7.1, a lot of us notice that product images get cropped or zoomed in on mobile, even though they look good on desktop.
If this is a repeat offense, fear not; there’s an easy solution. This guide will show you a non-destructive CSS solution to keep your product images at their natural size and composition under all conditions.
Why Are Images Cropping on Mobile?
Squarespace’s responsive images system leverages CSS properties like object-fit: cover to automatically scale and crop images to fill their placeholders. Good for center/left/right-justified grids or banners, but for more general content, they can crop in a way such as:
Vertical or portrait-style product photos
Detailed product shots
Images that need to be seen
This auto-styling can decrease visibility and impact user experience on mobile, though.
The Solution: Custom CSS to Disable Cropping
Follow these simple steps to correct the issue:
Step 1: Open the Custom CSS Panel
Go to your Squarespace dashboard
Navigate to Pages → Custom code → Custom CSS
Step 2: Paste the Following Code
/* Prevent product image cropping on mobile devices */
@media screen and (max-width: 640px) {
.ProductItem-gallery-slides img{
object-fit: contain !important;
width: 100% !important;
height: auto !important;
}
.ProductItem-gallery-slides{
overflow: visible !important;
}
}
Step 3: Save Your Changes
Click Save in the top left corner of the editor. Then, preview your site on a mobile device or by resizing your browser window.
What This Fix Does
Make your product images keep their original aspect ratio on mobile
Prevents container behavior resulting in auto-cropping
Keeps images clear, centered, and fully visible on small screens
This lightweight CSS tweak lets your mobile visitors see your product images exactly how they were meant to be seen, valuing trust, clarity, and visual power.
Final Thoughts
Although Squarespace has some wonderful-looking responsive designs, they do sometimes restrict your creative freedom, for example, with those pesky automatically cropped images. Lucky for you, with a few custom CSS tweaks, you can regain control of your mobile image display and ensure a frictionless shopping experience.
Frequently Asked Questions (FAQ)
1. Why are my product images being cut off on mobile on squarespace?
Squarespace employs responsive design with object-fit: cover for all images. This makes them fill their containers (crop the content of the images), especially on small mobile screens. That’s fine for layout consistency, but not so good if you have products inside that benefit from maximum visibility.
2. Does using object-fit: contain change how the image displays on a desktop?
No. Only mobile devices are targeted (max-width: 640px). Desktop will not change, on mobile products will be shown full and uncropped.
3. Is there a way to auto-apply this CSS fix to all product images?
Yes. If you were to add this CSS to Pages → Custom code → Custom CSS, then this would apply to all your product images site-wide, and you won’t be limited to changing each product.
4. Does this have any impact on the speed of loading images or any SEO?
Not significantly. The CSS dealt only with presentation, not loading or indexing. To maintain fast loading times, make sure that image sizes are optimized and that large files are compressed before uploading.
5. Can I use this towards the gallery/blog images also?
This specific fix targets. ProductItem-gallery-slides that we even use on product pages. If you want to have a no-crop effect like this for gallery or blog images, you will have to modify the selectors (e.g, sqs-gallery img,. entry-content img) with the same object-fit: contain method.
