Resize Images for Mobile in Squarespace 7.1

Hello all! As I have stated in previous blog posts, having a mobile friendly website is super important for any business. One of the most important reasons is that search engines rank mobile friendly websites higher in search results. Plus, if you are using social media as a marketing tool (hopefully you are!!), then visitors are coming to your website on their mobile phone. If this is not a pleasant experience, you are losing potential customers and wasting your marketing efforts.

Squarespace does a good job of altering your website for different screen sizes. However, there are a couple of tweaks I apply to just about all of the websites I design in order to make them a little bit more mobile friendly.

In a previous video, I showed you how to resize your images on Squarespace 7.0. However, this technique is slightly different on Squarespace 7.1. So in this video, I show you how to resize the images on the mobile version of your site in Squarespace 7.1. All of the code used in the video is provided below.

The following code is used in the video.

Mobile Breakpoints

/* CSS FOR TABLET AND MOBILE */
@mobile:  ~"only screen and (max-width: 640px)";
@tablet:  ~"only screen and (min-width: 641px) and (max-width: 949px)";

/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/

/* Insert Code for Tablet Above This Line */
}

/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/

/* Insert Code for Mobile Above This Line */
}

Resizing Image Blocks Site-Wide

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

Resizing Image Blocks on a Specific Page

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

Resizing Image Blocks in a Specific Section

Note: This code has been updated since the video was filmed.

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

Resizing a Specific Image

#blockidnumber { 
  width: 80% !important;
  margin: 0 auto;
}

Here are some other posts you may like:

• Edit The Mobile Banner Image On Squarespace 7.1

• Before/After Image Slider In Squarespace 7.1

• Create A Fixed Header In Squarespace 7.0 And 7.1