How to optimise your Squarespace website 7.1 for mobile screens

In this tutorial, you will be shown how to optimize your Squarespace website 7.1 for mobile screens.

Squarespace in most cases automatically alters your website for various screen sizes, unlike other content management systems, such as ‘ Showit’ and ‘Wix ‘where you can alter your design for mobile size screens.

This can be beneficial as you're not repeating the process twice, however, the drawback is that the process in dynamic and you have no specific control on how the design renders on mobile screen without intervening with some custom code.

Below are a couple of tweaks you can apply to your Squarespace 7.1 website make them effectively more mobile friendly.
A useful tool you can use to identify the #collection-id and #blockidnumber is a Chrome Extension called Squarespace Collection/Block Identifier (https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde) which I fully recommend.

Complexity: Intermediate

To optimize your Squarespace website 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 resizing Image Blocks Site-Wide

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

Use this code to resizing Image Blocks on a Specific Page

#collection-id .sqs-block-image {
width: 85%;
margin: 0 auto;
}

Use this code to resizing Image Blocks in a Specific Section

#collection-id {
#page .page-section:nth-of-type(1) {
.sqs-block-image {
width: 85%;
margin: 0 auto;}
}
}

Use this code to resize a Specific Image

#blockidnumber {
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*/

/**Use this code to resizing Image Blocks Site-Wide**/

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

/* End Insert Code for Tablet */
}

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

/**Use this code to resizing Image Blocks Site-Wide**/

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

/* End Insert Code for Mobile*/
}