Aanpassen lettergrootte voor de mobiele (en tablet) versie van je Squarespace website

---

In de Site Styles van Squarespace kan je een heleboel zelf aanpassen. Kleuren, fonts, paddings, marges, positie van je navigatie etc. Maar helaas laat Squarespace je niet alles veranderen. Bijvoorbeeld de lettergroottes voor mobiel en tablet. Heel onhandig. Want soms wordt een Heading 3 tekst op mobiel groter dan je Heading 2 tekst. Of vind je je Heading 1 tekst op mobiel net iets te groot.

Gelukkig kan je met een stukje code dit probleem eenvoudig verhelpen. Deze code voer je in bij Custom CSS (te vinden via Design > Custom CSS). Het aantal pixels kan je uiteraard zelf aanpassen.

Voor mobiel:

Heading 1, 2 en 3 en body tekst

@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;}}

Voor tablet:

Heading 1, 2 en 3 en body tekst

@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;}}

---

Meer lezen?