Adjust Mobile Fonts Sizes with CSS

---

If you want to adjust the size of fonts on mobile independently, you can do this with CSS.

This includes font size and line height (space between lines).

STEP 1

Copy and paste the below code into the Custom CSS to target fonts on mobile.

@media screen and (max-width:760px)
{
h1 {
font-size: 45px!important;
line-height: 1.1 !important;}
h2 {
font-size: 32px!important;
font-weight: 400!important;
line-height: 1.2 !important;}
h3 {
font-size: 21px!important;
line-height: 1.5 !important;}
h4 {
font-size: 16px!important;
line-height: 1.2 !important;}
p {
font-size: 18px!important;
line-height: 1.5 !important;}
}

Just amend the font sizes and line height values shown. Be sure not to delete any brackets or semi-colons.

NOTE: Other devices can be targeted by adjusting the max-width value. eg:

@media screen and (max-width:990px) 

max-width can also be changed to min-width to exclude anything below a certain width from the CSS changes.

@media screen and (min-width:761px) 

---

For those who are new to this. You can add custom CSS to Squarespace to tweak the layout and add extra functionality. No coding experience needed, just copy and paste into the Custom CSS area which lives under the Pages > Website Tools area.

---

Give it a go.