Adjust font size on mobile and tablet in Squarespace

---

Note: This article applies only to Squarespace 7.0

In Squarespace's Site Styles, you can customize a lot of things yourself. Colors, fonts, padding, margins, navigation position, and so on. But unfortunately, Squarespace doesn’t let you change everything. For example, the font sizes for mobile and tablet. That’s really inconvenient. Because sometimes a Heading 3 text appears larger on mobile than your Heading 2 text. Or you might find your Heading 1 text on mobile just a little too big.

Fortunately, you can easily fix this problem with a bit of code. Enter this code in Custom CSS (which you can find under Design > Custom CSS). You can, of course, adjust the number of pixels yourself.

For mobile:

Headings 1, 2, and 3, and body text

@media only screen and (max-width: 640px) {h1 { font-size: 45px !important; }}

@media only screen and (max-width: 640px) {h2 { font-size: 35px !important; }}

@media only screen and (max-width: 640px) {h3 { font-size: 25px !important; }}

@media only screen and (max-width: 640px) {p { font-size: 18px !important; }}

Quotes:

@media only screen and (max-width: 640px) {.quote-block blockquote { font-size: 15px !important; }}

@media only screen and (max-width: 640px) {.quote-block .source { font-size: 10px !important; }}

Buttons:

@media only screen and (max-width: 640px) {.sqs-block-button .sqs-block-button-element--small { font-size: 17px;}}

@media only screen and (max-width: 640px) {.sqs-block-button .sqs-block-button-element--medium {font-size: 15px;}}

@media only screen and (max-width: 640px) {.sqs-block-button .sqs-block-button-element--large {font-size: 17px;}}

For tablets:

Headings 1, 2, and 3, and body text

@media only screen and (min-width: 641px) and (max-width: 949px) {h1 { font-size: 45px !important; }}

@media only screen and (min-width: 641px) and (max-width: 949px) {h2 { font-size: 35px !important; }}

@media only screen and (min-width: 641px) and (max-width: 949px) {h3 { font-size: 25px !important; }}

@media only screen and (min-width: 641px) and (max-width: 949px) {p { font-size: 18px !important; }}

Quotes:

@media only screen and (min-width: 641px) and (max-width: 949px) {.quote-block blockquote { font-size: 15px !important; }}

@media only screen and (min-width: 641px) and (max-width: 949px) {.quote-block .source { font-size: 10px !important; }}

Buttons:

@media only screen and (min-width: 641px) and (max-width: 949px) {.sqs-block-button .sqs-block-button-element--small { font-size: 17px;}}

@media only screen and (min-width: 641px) and (max-width: 949px) {.sqs-block-button .sqs-block-button-element--medium {font-size: 15px;}}

@media only screen and (min-width: 641px) and (max-width: 949px) {.sqs-block-button .sqs-block-button-element--large {font-size: 17px;}}

---

---

Want to read more?