Style Paragraphs 1, 2, and 3 Differently on Mobile in Squarespace 7.1

Jun 29

Typography is important when creating a responsive website in Squarespace 7.1 so your content is presented correctly, and especially on mobile devices.

Although Squarespace comes with a clean visual editor and default paragraph styles, there is no inbuilt feature available to change the look of Paragraphs 1, 2, and 3 separately for mobile view.

But don’t fret, "What does that mean for me, Craig?" We can crush it like a bag of stale pudding with just a few snippets of custom CSS. Let’s take you through the steps, including the right class names and some love for mobile styling.

Paragraph Styles in Squarespace 7.1

In Squarespace, paragraph text is categorized into 3 primary styles:

  
        Paragraph
        Class / Selector
        Purpose
      
        Paragraph 1
        .sqsrte-large
        Larger text, often for emphasis
      
        Paragraph 2
        p (default selector)
        Standard paragraph text
      
        Paragraph 3
        .sqsrte-small
        Small text, footnotes, or captions

These classes are applied in the WYSIWYG editor (Text Blocks or Markdown) and styled globally under Design → Site Styles.

However, on mobile devices, larger text can feel overwhelming, and smaller text may become unreadable.

The Solution: Use Mobile-Specific CSS

To customize how these paragraphs appear only on mobile screens, we’ll use a CSS media query that targets screen widths under 767px (commonly used for smartphones).

Step-by-Step: How to Add Custom Mobile CSS

Step 1: Go to the Custom CSS Panel

In your Squarespace dashboard, navigate to:
Pages → Custom code → Custom CSS
Scroll to the bottom and paste the following code:


/* Mobile Typography Adjustments for Paragraphs */
@media screen and (max-width: 767px) {
  /* Paragraph 1: Larger text - scale down for mobile */
  p.sqsrte-large {
    font-size: 18px !important;
    line-height: 1.6 !important;
    color: #222 !important;
  }
  /* Paragraph 2: Standard paragraph style */
  p {
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: #444 !important;
  }
  /* Paragraph 3: Small text - increase readability */
  p.sqsrte-small {
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #666 !important;
  }
}

What You Can Customize:

  
        Property
        Description
      
        font-size
        Adjusts the size of the text (use px or em)
      
        line-height
        Controls vertical spacing between lines
      
        color
        Sets the font color
      
        font-family
        Optional: apply a mobile-optimized font
      
        text-align
        Align text left, right, center, or justified

You can fine-tune the values depending on your brand typography, design feel, and accessibility needs.

Pro Tips for Mobile Typography

Don’t go below 14px for body text on mobile, it may become unreadable
Maintain enough line-height to support scanning and readability
Match your paragraph colors with your theme palette for visual consistency
Use the Chrome DevTools mobile preview (Ctrl + Shift + M) to test designs in real time

Summary: Mobile Paragraph Styling in Squarespace 7.1

  
        Style
        Class/Selector
        Mobile Styling Suggestion
      
        Paragraph 1
        .sqsrte-large
        Reduce font-size to ~18px
      
        Paragraph 2
        p
        Standard ~16px, dark gray
      
        Paragraph 3
        .sqsrte-small
        Slightly smaller, legible

✔ Use CSS media queries to apply these only on screens below 767px
✔ Improves mobile UX and keeps your site visually polished across devices

Final Thoughts

Good mobile typography is not a matter of simply reducing text size; it’s about creating a better experience for your visitors. Tweaking Paragraphs 1, 2, and 3 for mobile view in Squarespace, you've made your material manageable, legible, easy to navigate, and on brand.

Frequently Asked Questions (FAQ)

1: What are Paragraphs 1, 2, and 3 in Squarespace 7.1?
A: These are predefined text styles used in the Squarespace text editor:

Paragraph 1 is labeled .sqsrte-large and is typically used for emphasis or intro content.
Paragraph 2 is the default paragraph style.
Paragraph 3, or .sqsrte-small, is often used for captions or footnotes.

2: Why would I want these paragraphs to look different on Mobile?

A: On mobile, you have limited screen real estate, so the font sizes will either be too large or too small out of the box. You can change size, line spacing, and colour so making it suitable to read on phones and small tablets.

3: Will these change the appearance of the text on a desktop?

A: No. The CSS is within a mobile-only media query, meaning the effects will only be visible under 767px wide screen widths. It will keep your desktop exactly as it is now.

4: Where do I add the custom mobile CSS?

A: In your Squarespace Dashboard, click on Design and then Custom CSS. If you scroll down to the last line, you can put in the code that was given in the tutorial. Don't forget to click Save afterward.

5: What if I'm using different fonts for my headings or button text? Will those be affected?

A: No. This tutorial focuses only on paragraph elements (.sqsrte-large, default p, and .sqsrte-small). Your buttons and everything else won’t be messed up!

6: What is the smallest font size I should use on mobile?

A: Don’t go less than 14px for body copy on mobile. Smaller fonts might be tough to read and could impact your site’s accessibility, too.