In Squarespace, mobile versions of pictures get cropped.
A good example is here:
https://www.nigelartingstall.com/new-editions/green%20woodpeckers
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?
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;
}
}