How to Change Font Size on Mobile View Squarespace
In this blog tutorial, learn how to adjust font sizes specifically for mobile view on your Squarespace website
Let’s dive in..
Watch the video 👇
Check out the YouTube video below
What I want to achieve is making the font size smaller on the mobile view in Squarespace.
In order to do that, we need to add some custom code that assigns a different font size for mobile.
Go to Pages → Website Tools → Custom CSS
Copy and paste the following code:
@media screen and (max-width: 767px) {
h1 { // Change this to the style you want to trigger
font-size: 2rem !important; // change size to wanted size - can also follow other size format like (px, rem and em)
}
}
Note that you do not have to use rem for font sizing; you can use rem, em, px, and other units as well.
You can also adjust the font size for multiple elements. In the code above, I targeted h1, but you can modify it to include h2, h3, h4, and p as well. Simply add a code block for each heading you want to adjust. It would look something like this:
@media screen and (max-width: 767px) {
h1 { // Change this to the style you want to trigger
font-size: 2rem !important; // change size to wanted size - can also follow other size format like (px, rem and em)
}
h2 { // Change this to the style you want to trigger
font-size: 2rem !important; // change size to wanted size - can also follow other size format like (px, rem and em)
}
p { // Change this to the style you want to trigger
font-size: 2rem !important; // change size to wanted size - can also follow other size format like (px, rem and em)
}
}
You will also notice that this only changes the font size on mobile and does not affect the web view.
Your designer
I'm Victor Rolf, an expert Squarespace designer .If you'd like to discuss a potential project, you can email me at victor@rolfmade.com or get in touch here. Alternatively, book a free 15-minute consultation call here.
