Mobile Font Size (Squarespace 7.1)

---

Look Demo

Easily adjust the heading and paragraph text sizes on mobile. This plugin uses css editor and works with Squarespace 7.1.

---

How To Install

From your Squarespace account, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

// Mobile Heading Sizes //

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

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

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

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

// Mobile Paragraph Sizes //

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

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

@media only screen and (max-width: 640px) {
   .sqsrte-small { font-size: 12px !important; }
}

// Mobile Monospace Sizes //

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

---

Customize

Adjust the font size px values for the heading and paragraph text.

---