Resize Product Images for Mobile

What does this code do?

These code snippets will allow you resize product images to make your website more mobile friendly.

Code Snippets

Copy and paste this code into Design > Custom CSS

@media only screen and (max-width:640px) {
  CODE GOES HERE
}

Then add the appropriate code in between the brackets.

Squarespace 7.0 (Brine Template)

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

Then edit the number 100 to be any number less than 160px. You may need to resize the screen to see the effect.

Squarespace 7.1

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

Then edit the number 80 to be any number less than 100%.

How To Use It

1. Copy and paste the code as indicated above.

2. Edit the number to resize to your liking.