How to create responsive text, WITHOUT media queries, in Squarespace (7.0 & 7.1)

• 00
• 01
• 02
• 99

So, tell me something…

Have you ever wanted to make the font size on your client projects shrink down or size up based on the screen size?

Have you ever tried to do that by using units like vw and ended up with a headache or having to create tons of media queries to fix certain screen sizes?

Well, guess what?

As per the title of this post, in today's video we'll be looking at how we can handle this problem and create responsive text in Squarespace with ONE line of code and NO media queries.

Yeah, you heard me.

NO MEDIA QUERIES.

Now, you may or may not have heard of this CSS trick before but, if you haven't, I promise you'll find it extremely helpful!

Curious? Then hop right into the vid!

Tutorial

Overview & timestamps

1. 00:00 - Intro

2. 00:45 - Introducing your new text-resizing weapon
   So, it’s time to reveal one of my favorite CSS tricks when it comes to text stuff, the clamp() function!

3. 00:56 - The problem with using font sizes that grow and shrink with the screen
   Now, before we take a look at how to use it, let’s first make sure we’re both on the same page about why this is necessary for certain situations, and why simply using vw values won’t cut always cut it.

4. 03:10 - How clamp( ) works
   Once the main issue of vw values on their own has been brought to light, we’ll see how clamp() can help us fix that!

5. 03:31 - How to use clamp( ) to create responsive text in Squarespace
   Using a Squarespace heading as an example, we’ll break down the steps we need to take to figure out the different parameters required in our function to make sure the text looks good on all devices.

6. 05:50 - Applying clamp( ) to the font size of a heading
   And of course, last but not least, we’ll apply our new function to make that bold heading responsive in one single line of code and without breaking a sweat!

So, how about that?

Now you know how to make your Squarespace headings (or any other text on the site) super responsive with veeeery little CSS, and without the hassle of setting up different breakpoints.

Hope you found it helpful!

Until next time,

B.

---

Full code

/*HOW TO CREATE RESPONSIVE TEXT WITHOUT MEDIA QUERIES IN SQUARESPACE (7.0 & 7.1)*/
h1 {
  font-size: clamp(70px, 15vw, 260px);
}