How to Apply Custom CSS to your Squarespace Site on Mobile Only

Chances are that if you’ve landed on this page, you’re scratching your head trying to figure out how to format your text blocks on your Squarespace website on mobile only. You’re not alone. I struggled with this for far too long and in this quick video tutorial I’m going to show you how to quickly add custom CSS to target blocks on mobile only. Buckle up, it’s going to be a fun one!

Watch the Video 👇

Add this CSS to your Squarespace Site

In order to target block ID’s, headings, and paragraphs on mobile-only, you will need to add the following CSS code before your block ID’s or identifiers:

@media only screen and (max-width: 767px)

In the video tutorial above, I target a specific Block ID using the Squarespace ID Finder. You can download it here. In this instance, I change the h1 mobile font size. However, it works just the same for all headings or paragraphs. For example, add the following CSS code to your Squarespace CSS editor to change the font size of your h1 heading on mobile only:

@media only screen and (max-width: 767px) {

h1 {

font-size: 20px;

}

}

---

Your Designer

I'm Travis, an expert Squarespace web designer and 7+ year former Squarespace employee. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email at travis@coyotemooncreative.com. Alternatively, you can book a 30-minute consultation call here.

---

Download the Ultimate Guide to Building Great Squarespace Websites

---

Want More?