How to change font size on only mobile on squarespace

When launching your Squarespace website, ensuring it is mobile-friendly is not just an option—it's a necessity. A significant aspect of this is making sure your text is readable across all devices, especially on mobile. Squarespace users often encounter a common issue: text that looks perfect on desktop can appear overwhelming or out of place on smaller screens. Fortunately, there's a simple solution to adjust the font size specifically for mobile views without affecting the desktop version. This guide will walk you through the steps to customize your font size for mobile devices using custom CSS in Squarespace.

Watch the Video

Check out the YouTube video below 👇

UNDERSTANDING THE CHALLENGE

When designing a website, it's crucial to consider how it will look on various devices. You might notice that while your font size works perfectly on a desktop, it becomes too large or small when viewed on a mobile device. Adjusting the font directly can lead to a compromise: making it fit on mobile might result in too small text on desktop and vice versa. This is where custom CSS comes into play, allowing you to tailor font sizes for mobile screens specifically.

ACCESSING CUSTOM CSS

Navigate to Custom CSS: In your Squarespace editor, access the Custom CSS section by typing /css after your site's URL or navigating through the Design menu.
Prepare for Coding: Before adding your code, it's a good practice to name it for future reference. You can add a comment in CSS by starting the line with //. For example, //Change mobile font size//. This won't affect the code but will help you or anyone else understand what this piece of code does at a glance.

WRITING THE CUSTOM CSS CODE

Specify the Media Query: Media queries are what we use to apply CSS rules to specific device sizes. To target mobile devices, we use the following syntax: @media screen and (max-width: 640px). This tells the browser to apply the enclosed styles only if the device's screen width is 640 pixels or less, typical for mobile screens.
Select the Element and Set the Font Size: Choose the element you want to modify. For example, if you're adjusting the heading 1 (h1) size, you would specify it within the media query block. To change the font size, use the font-size property followed by the desired size. An example would be setting it to 2rem for a smaller size on mobile devices. It's essential to add !important to ensure this rule takes precedence over others.

IMPLEMENTING YOUR CHANGES

After writing your code, it should look something like this:

//Change mobile font size//

@media screen and (max-width: 640px) {

h1 {

font-size: 2rem !important;

}

Save Your Changes: With your code ready, hit the save button in the Custom CSS section.

TESTING YOUR ADJUSTMENTS

Preview on Mobile: To ensure your changes have the desired effect, switch to the mobile view in the Squarespace editor and observe the adjusted font size. It should now fit more appropriately on smaller screens without affecting the desktop version.

Adjusting the font size for mobile devices in Squarespace is straightforward with the right CSS code. This customization enhances your site's readability and user experience on mobile devices, ensuring your content looks its best regardless of the screen size. Remember, the key to a successful mobile-friendly design is testing and adjustment; feel free to tweak the font sizes to match your specific design needs.

Your Designer

I’m Wesley, a Squarespace website designer. I’ve created amazing websites for multiple clients across different industries from Education sites to Wellness brands to Accounting Firms. If you’re looking for a website and want to discuss a potential project, email me at wesley@websleydesign.com. You can also schedule a free 15-minute consultation call