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

Use this code to resizing Image Blocks Site-Wide

Use this code to resizing Image Blocks on a Specific Page

Use this code to resizing Image Blocks in a Specific Section

Use this code to resize a Specific Image

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