How to Change Mobile Text Size on Squarespace Without Affecting Desktop

As website designers or business owners trying to create your first website, you might have noticed a certain problem—your desktop version looks perfect, then when you look at your desktop it’s massively out of proportion. When trying to adjust this in either editors, you will discover quickly that Squarespace does not allow for both desktop and mobile to have different text sizes.

WELL YOU ARE IN LUCK! With just a simple piece of code, and some fiddling around with different sizes, you can make all heading and paragraph sizes completely different.

If you have any problems with this guide, feel free to check out the video version below.

Let’s dive in.

How to Fix Mobile Text Size with CSS

Here are the very simple steps you need to take to change the text size on the mobile version of your Squarespace website:

1. Log into your Squarespace site and find your way to the Custom CSS page of the portal. Navigate from Design > Custom CSS in the Squarespace editor.

2. Copy and paste the following pirvr of CSS code into this page:

   @media screen and (max-width: 600px) {
       h1 {
           font-size: 45px !important;
       }
       h2 {
           font-size: 20px !important;
       }
   }

3. Finally, save this code and check it works.

   How This Code Works

• The @media screen and (max-width: 600px) section tells Squarespace that the styling rules inside this block should only apply to screens that are 600 pixels wide or smaller (which is typical for mobile devices).

• The h1 and h2 tags adjust the font sizes of heading elements only on mobile, without changing them on desktop.

• The !important tag forces Squarespace to apply these styles, even if other settings exist.

Customize for Your Website

You can modify the CSS code to fit your specific needs:

• In order to change the paragraph text you need to add- p { font-size: 16px !important; } inside the media query.

• Change the max-width value if you want the rules to apply to tablets as well (e.g., use max-width: 900px).

Final Thoughts

This simple method can make such a major difference to your Squarespace website. Ensure to use this method for all text sizes on your Squarespace website for maximum effectivity.

If you have any questions on this, do not hesitate to reach out to me on WhatsApp (I am more than happy to answer as many questions as you may have). If you are looking for someone to take on a Squarespace project for you, book yourself a call and I can find out a little bit more about your business and how I can help.

Thanks for reading.