How to Resize Images On Your Mobile Friendly Squarespace Website
Having a mobile friendly website is super important for any business.
Search engines like Google prioritize websites that provide a great user experience. Considering that nearly 60% of web traffic comes through mobile devices, your mobile website experience matters just as much as your desktop experience. Maybe even more!
Squarespace offers responsive templates, meaning they automatically adjust for different screen sizes. But often the images are too large on mobile, taking up too much screen space and making your website look clunky.
So there are a couple of twe…
How to Resize Images On Your Mobile Friendly Squarespace Website
Having a mobile friendly website is super important for any business.
Search engines like Google prioritize websites that provide a great user experience. Considering that nearly 60% of web traffic comes through mobile devices, your mobile website experience matters just as much as your desktop experience. Maybe even more!
Squarespace offers responsive templates, meaning they automatically adjust for different screen sizes. But often the images are too large on mobile, taking up too much screen space and making your website look clunky.
So there are a couple of tweaks I make to nearly every Squarespace website I design, in order to resize the images for mobile view.
Watch the video below for the full tutorial!
Applying Code for Different Screen Sizes
Resizing your images for mobile can be tricky…because you don’t want to accidentally resize the images on desktop view as well!
So, the first step is to open the Custom CSS block under the Design tab on your Squarespace website, and copy and paste the CSS below.
@mobile: ~"only screen and (max-width: 640px)";
@tablet: ~"only screen and (min-width: 641px) and (max-width: 949px)";
@media @tablet {
}
@media @mobile {
}
By itself, this code won’t do anything to your Squarespace website.
All it does is create ‘breakpoints’ that determine when your code should be applied. The mobile breakpoint has a max width of 640px. This means that any code you add for mobile view will only apply to screens that are 640px wide or less.
Meanwhile, the tablet screen width ranges from 641px to 949px. So any code you add for tablet view will apply to screen sizes between that width range.
Resize Image Blocks for Mobile or Tablet
Okay, now that we have our foundation code to set the screen size parameters, we can get to work resizing our images.
Copy the CSS below and paste it into the breakpoint code, in between the brackets for mobile view.
.sqs-block-image {
width: 80%;
margin: 0 auto;
}
This code snippet automatically scales all of your image blocks down to 80% of the original size, making the images across your entire website smaller for mobile view.
Resize Images on a Specific Page
Sometimes it’s actually helpful to have large images on mobile view, especially for a portfolio page or gallery. So…what if you only want to resize the images on a few pages in your Squarespace website, but not across the whole site?
For that, all you have to do is add your page name in front of the CSS snippet that you used above. If you don’t know how to find your page name, I show you how to find it in the tutorial video.
#nameofpage .sqs-block-image {
width: 80%;
margin: 0 auto;
}
Resize Individual Images for Mobile View
Finally, you can resize individual images to make your website more mobile friendly and have more control over your Squarespace website customization.
Once you choose an image to edit, you will need to find the block ID for the image block. You can do this one of two ways:
Use Chrome developer tools to inspect your website CSS, and find the ID for the block you selected. It can be difficult to find the ID within your website code, so I show you how to do this in detail in the video. 1.
Use the Squarespace ID Finder Chrome extension to find the block ID when you hover over it. I show you how to use this handy browser extension in my blog post on removing link underlines across your website.
After finding the block ID, just paste the ID number at the beginning of your code. This ensures that the CSS will only affect the image block you chose.
#blockidnumber {
width: 80% !important;
margin: 0 auto;
}
Equipped with these code snippets, you can make your Squarespace website more mobile friendly by resizing any of your images. Not only will your users have a better experience, but your pages will rank higher in search engines due to a more mobile friendly design.
If you would like to resize your product images for mobile, you will need a different CSS snippet. Click here to resize product images for mobile view.
Rebecca Grace is a Squarespace CSS Expert and Website Designer.