How to reduce font size on mobile devices in Squarespace

How to reduce font size on mobile devices in Squarespace

Although Squarespace is a platform that automatically builds a mobile version of the site, it's a common problem when the fonts on mobile devices look very small or too large.

If you want to see how your site looks on different devices, I recommend this application: lambdatest.com

 

Now, I will briefly explain how you can fix this problem yourself and quickly.

In order to accelerate the process and not teach you the basics of CSS, download this extension for Chrome (click me). The extension will help you to correctly edit the code for your needs, which we will do next. It will be useful in the future.



Main Steps

1. First open the Custom CSS. To do this, open Squarespace Admin Panel -> Design -> Custom CSS.

2. Insert the code block that I have left below. In simple words, this code changes the size of the title type h1 on devices whose display width is less than 650px.



Important

For example, the screen width of the IPhone 6/7/8 is 375px. Replace "16px" with the size you need. Accordingly, if your title is of type h2, h3 or it is generally plain text, also replace h1.

@media all and (max-width: 650px) {
    /* It could be h1 or h2 or h3 or p */
    h1 {
        font-size: 16px;
    }
}

If you want to reduce or enlarge the size of the font on large monitors, change the value of max-width: 650px by min-width: 1600px

Example below:

@media all and (min-width: 1600px) {
    /* It could be h1 or h2 or h3 or p */
    h1 {
        font-size: 16px;
    }
}

3. Open the page where you want to change the font size. Let's launch the plug-in that we downloaded earlier and you will see a similar picture. Select the block identifier in which our font is located. (GIF #1)

GIF #1. Identifier selecting.

GIF #1. Identifier selecting.

4. That's all. It remains to add an identifier to the CSS code, if you have done everything correctly, it has already been copied to the clipboard. Insert it using the combination Cmd + C or Ctrl + C (if you're using Windows). That should look like the final result.

@media all and (max-width: 650px) {
    /* Instead of #block-yui_3_17_2_1_1540212606631_7372 should be identifier of your block */
    #block-yui_3_17_2_1_1540212606631_7372 h1 {
        font-size: 16px;
    }
}

Keep it in mind

If you added the code and after that nothing changed, try to declare the new CSS rule as !important

@media all and (max-width: 650px) {
    #block-yui_3_17_2_1_1540212606631_7372 h1 {
        font-size: 16px !important;
    }
}

Hopefully, the article was helpful to you if you have any questions - Contact Me.