Solution 1 :

Yes, you can solve this issue in Squarespace with CSS. Because Squarespace doesn’t give you the option to let the image retain its native aspect ratio on mobile, it must be overridden. Furthermore, the JavaScript on the page may adjust for some of the CSS rules once they are added, and so we must add another rule to override that as well.

The following CSS, inserted via Custom CSS, should achieve that:

.ProductItem-gallery-slides-item-image {
  position: relative !important;
@media screen and (max-width: 767px) {
  .tweak-product-basic-item-gallery-design-stacked .ProductItem-gallery-slides::before {
    padding-bottom: 0;
  .ProductItem-gallery-slides-item {
    position: relative;

Problem :

In Squarespace, mobile versions of pictures get cropped.

A good example is here:

The image displays in full on desktop but below 768px it crops to a square.

The site has images of different ratios, square, portrait, landscape and widescreen. So whatever setting I use for the image ratio in Squarespace, there is no way of getting all images to display without cropping on mobile, yet on desktop they are all OK.

Is there a CSS solution to making this work on mobile in the way it does on desktop?


Comment posted by Justinas

Yes there is. What have you tried? What code you use? Check

Comment posted by user2768583

This words very well! Thanks very much for this fix. I wonder why Squarespace don’t allow for this within the control panel?