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

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

1. In your Squarespace dashboard, navigate to:
   Pages → Custom code → Custom CSS

2. Scroll to the bottom and paste the following code:

Copy

Copied!

/* 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

• 1: What are Paragraphs 1, 2, and 3 in Squarespace 7.1?

  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?

  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?

  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?

  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?

  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!