Aanpassen lettergrootte op mobiel en tablet in Squarespace

13 dec

NB: dit artikel is alleen van toepassing op Squarespace 7.0

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