How to resize images on Squarespace 7.1 for mobile screens

In today's digital landscape, having a mobile-friendly website is crucial for the success of any business. It is essential to prioritize providing an exceptional user experience, as search engines now prioritize mobile-responsive websites when determining rankings. They assess how well your website adapts to mobile devices.

In this tutorial, we will guide you through the process of resizing images specifically for mobile screens on Squarespace 7.1. While Squarespace generally adjusts your website for various screen sizes, it is important to note that the rendering on mobile screens is dynamic, and you may not have precise control over the design without implementing custom code.

By following the steps outlined in this tutorial, you will be able to intervene and customize the sizing of your images for mobile screens, ensuring an optimized display and an exceptional user experience on Squarespace 7.1. This will help your website adapt seamlessly to mobile devices, meeting the expectations of both your visitors and search engines.

Complexity: Easy

To resize images on Squarespace 7.1 for mobile screens, simply copy the code below:

Mobile Breakpoints

/* CSS FOR TABLET */
@media only screen and (min-width: 641px) and (max-width: 949px)) {
/* Start Insert Code for Tablet*/


/* End Insert Code for Tablet */
}

/* CSS FOR MOBILE */
@media only screen and (max-width: 640px) {
/* Start Insert Code for Mobile*/



/* End Insert Code for Mobile*/
}

Use this code to resize image

.sqs-block-image {
width: 85% !important;
margin: 0 auto;
}

For a full working example which you will paste in your Design > Custom CSS is shown below:

/* CSS FOR TABLET */
@media only screen and (min-width: 641px) and (max-width: 949px)) {
/* Start Insert Code for Tablet*/

.sqs-block-image {
width: 85% !important;
margin: 0 auto;
}

/* End Insert Code for Tablet */
}

/* CSS FOR MOBILE */
@media only screen and (max-width: 640px) {
/* Start Insert Code for Mobile*/

.sqs-block-image {
width: 85% !important;
margin: 0 auto;
}

/* End Insert Code for Mobile*/
}

You can also look at our other posts

How to optimise your Squarespace website 7.1 for mobile screens
How to resize product images on Squarespace 7.1 for mobile screens