Resize Images for Mobile

What does this code do?

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

Code Snippets

Copy and paste this code into Design > Custom CSS

/* Resize Images for Mobile */
@media only screen and (max-width:640px) {
  CODE GOES HERE
}

Then add the appropriate code in between the brackets.

/* Images Site Wide */
.sqs-block-image {
  width: 80%;
  margin: 0 auto;
}

/* Specific Images */
SELECTOR {
  width: 80%;
  margin: 0 auto;
}

Then change the word SELECTOR to one of the selectors below.

Squarespace 7.0

/* One Page */
#COLLECTIONID .sqs-block-image 

/* The Whole Footer */
footer .sqs-block-image 

/* The Top Footer Section */
.Footer-blocks--top .sqs-block-image 

/* The Middle Footer Section */
.Footer-blocks--middle .sqs-block-image 

/* The Bottom Footer Section */
.Footer-blocks--bottom .sqs-block-image 

/* One Section */
#PAGEID .sqs-block-image 

/* One Image Block */
#BLOCKID

Squarespace 7.1

/* One Page */
#COLLECTIONID .sqs-block-image 

/* The Whole Footer */
#footer-sections .sqs-block-image 

/* One Section */
#COLLECTIONID #page .page-section:nth-of-type(1) .sqs-block-image

/* One Image Block */
#BLOCKID

How To Use It

1. Copy and paste the code as indicated above.

2. If targeting specific images, choose the selector that matches your situation.

3. To learn how to find a collection id, page id, or block id check out our Start Here guide.

4. If targeting one section in Squarespace 7.1, change the 1 to match the section you are trying to change.

5. Change the number 80 to match the size that you would like. I DO NOT suggest using this code to make your image larger. This can cause your site to have extra width.

6. If you do not want your image centered, then remove the line margin: 0 auto;