InsideTheSquare.co

View Original

How to change your mobile font size in Squarespace

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

This tutorial covers how to make changes to your mobile font size for specific types of text on your Squarespace site.

The short version: You can apply a specific font size to any type of text in any specific section.

I use the example of a paragraph text link in my footer.

The paragraph text is fine on the page, and fine for most of the footer, but the links are too close together to be easy to use on mobile.

So I isolate them using this code:

@media only screen and (max-width: 640px){ #footer-sections p a{font-size:1rem!important} }

That code basically says this: on a screen that is 640 or smaller (@media only screen and (max-width: 640px)) in the footer of the page (#footer-sections), when you see paragraph text (p) that is an active link (a) make sure it is this size (font-size) oh and this is more important than any other code you might see (!important)


For a full list of the media queries that I use to isolate mobile, tablet, and desktop, check out this article:
insidethesquare.co/mobile