How to resize images on mobile in Squarespace
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;}
If you are 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 isolate a single image? Replace the text .sqs-block-image with the block ID. You can grab that number using this free Chrome extension*.
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) nd 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.
<style> code goes here </style>
Important info:
✨ There is more than one way to do this! This is just one approach of many because code is super customizable.
🔗 If you want this to happen on a single page, and you aren’t using the block ID for the image, follow the steps in this tutorial on how to install this code on a single page in your Squarespace site.
🙋 Need some help? Visit insidethesquare.co/code-help to see my current support options.
