How to Resize Images on Mobile in Squarespace

Mar 30

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

In this tutorial, you’ll learn how to change the size of an image specifically on mobile devices using custom CSS.

The video shows you step by step how to install the codes and what parts of it you’ll want to change to make it look amazing on your own site!

A quick pro tip before you dive in: You can do this to just one image using the block id. Here is a link to the chrome extension I use to easily find block ID’s in Squarespace. *Please note I am not affiliated with them in any way, I just use this extension in my own work!

Ready to rock? Awesome! The codes from the video are below.

Here are the codes:

This code will resize all the images on your site to be 60% their standard width and set the margins to “auto” which will center your image.

You can adjust the percentage to any size you want to use, and play around with the margin too!

.sqs-block-image {width:60%; margin:auto;}

Trying to target a specific image with a block id?

Add that block id before the text .sqs-block-image like this:

#block-yui-123456789 .sqs-block-image {width:60%; margin:auto;}

This second code adds a negative value to the bottom margin to scoot a stack of images closer.

.sqs-block-image {width:60%; margin:auto; margin-bottom:-10%}

Ready to apply this to just the mobile version of your site?

Add the media query to make sure it only applies to screens smaller than 640px in width.

@media only screen and (max-width:640px) { .sqs-block-image {width:60%; margin:auto}}

How about just the tablet version?

You can use the media query below to adjust an image size on any screen larger than 640px but smaller than 950px.

@media only screen and (min-width: 640px) and (max-width: 950px) { .sqs-block-image {width:60%; margin:auto}}

Want to install this code on a single page?

Use an on page code block or page header code injection (in the advanced section of your page settings menu) and place the code between two style brackets like this example below.

If you want to see the step-by-step tutorial, check out this video.