If you’re writing custom CSS for your Squarespace site, you may want to make adjustments based on screen size. For example, in my recent post on How to Add an Icon to an Image Card in Squarespace, Meg asked how to adapt the code so the image resizes for tablet and mobile view.

Media Queries in Squarespace

Fortunately, this is pretty easy to do with media queries in CSS. We can use a media query to check types and features of media. For example, we can specify that certain styles are for printed documents or on digital screens. And we can also specify styles based on viewport size, device orientation, or screen resolution.

In this post, we’ll focus on the screen size of the viewing device and then customize our CSS accordingly. Keep in mind that the pixel sizes I’m using in the code may change depending on the particular device you want to target. Feel free to change up the numbers to create the breakpoints you want.

In general, we’ll create the media query using code similar to this:

/* media query for mobile devices */
@media screen and (max-width:767px) {
    YOUR CSS HERE
}

So we are essentially wrapping our CSS inside the media query. In this example, our CSS code would only run if the screen size of the device is 767px wide or less. If we wanted to target tablets, we could do something like:

/* media query for tablet */
@media screen and (max-width:991px) and (min-width:768px) {
 YOUR CSS HERE
}

One thing to watch for is to make sure you close both your original CSS and the media query with curly brackets. So you’ll have two of those at the end of the code snippet. }}

An Example

For the Image Card Icon example, we were using this code for all screen sizes:

.image-card .image-title::before {
    content: url();
zoom:20%;
    visibility: visible;
  display: block;
}

But we can add media queries to change the icon size so that it’s 20% on screens larger than 991px and 10% on smaller screens:

@media screen and (min-width:991px) {
    .image-card .image-title::before {
        content: url();
        zoom:20%;
        visibility: visible;
        display: block;
    }
}
@media screen and (max-width:990px) {
    .image-card .image-title::before {
        content: url();
        zoom:10%;
        visibility: visible;
        display: block;
    }
}

Another great use case for media queries is showing a different banner on mobile desktop.