Resize Product Images for Mobile in Squarespace

To help your website be more mobile friendly, Squarespace automatically resizes your images when being viewed from a mobile device.

In a previous video, I have shown you how to further resize images for mobile. However, the process for Product Images is slightly different.

In this video, I show you how to resize your product images for visitors viewing your site from a mobile device. All the code used in the video is provided below.

The following code is used in the video.

Mobile Breakpoint

@media only screen and (max-width: 640px) {
/* Insert Code for Mobile Below This Line*/

/* Insert Code for Mobile Above This Line */
}

Squarespace 7.0

.ProductList-innerImageWrapper, .ProductList-outerImageWrapper {
   width: 100px !important;
   height: 100px !important;
   margin: 0 auto;
   padding: 0 !important;
}

Squarespace 7.1

.products .grid-image {
   width: 80% !important;
   margin: 0 auto;
}

Here are some other posts you may like:

• Edit the Site Title and Logo for Mobile in Squarespace 7.1

• Resize Images for Mobile in Squarespace 7.1

• Edit the Mobile Banner Image on Squarespace 7.1