Edit Your Squarespace Site for Mobile

Squarespace does a good job of adjusting your site for mobile. However, this is an automatic, “one-size fits all” process that does not always align to the vision you have for your site.

As the designer, it is your job to scan through each of your pages on different screen sizes to make sure you like what you see. Maybe Squarespace has made your text too small, an image too big, or it’s cropped your background image in the wrong spot.

However, if you make an adjustment inside the Site Styles, it will apply to your whole site, including desktop and tablet. This is where Media Queries come in. Media Queries are a bit of coding magic that tell the browser to only apply the changes to certain screen sizes.

In this video, I show you how to use media queries in Squarespace. All the code used in the video is provided below.

The following code is used in the video.

/* Mobile Screens Only */
@media only screen and (max-width: 640px) {
  CODE GOES HERE
}

/* Tablet Screens Only */
@media only screen and (min-width: 641px) and (max-width:950px) {
  CODE GOES HERE
}

/* Desktop Screens Only */
@media only screen and (min-width: 951px) {
  CODE GOES HERE
}

Here are some other posts you may like:

• Full Mobile Banner Image in Squarespace (No Cropping!)

• Grid Summary Items in Two Columns on Mobile

• Style Image Caption on Hover in Squarespace 7.1