1. Use spacer blocks strategically

Spacer blocks are one of the easiest ways to adjust layouts on mobile. When used on desktop, they can create columns, push content, and give breathing room. On mobile, however, they often stack or disappear.

Try adding/removing spacer blocks to shape how content stacks. For example, if your text is too cramped on mobile, add a spacer underneath it. Or if columns are overlapping in awkward ways, remove spacers to let things flow more naturally.

2. Use section height and padding controls

Most modern Squarespace templates (like Brine, Bedford, and Fluid Engine templates) let you control padding and spacing at the section level. This is a great way to create more space on mobile or tighten things up if everything feels too stretched.

→ In edit mode, click on a section

→ Click the “Settings” icon

→ Adjust top and bottom spacing

Tip: Always preview the section on mobile using the phone icon in the top right corner to check how it responds.

3. Adjust font sizes for mobile only

Using CSS, you can set different font sizes for headings or body text just on mobile. This is useful if your desktop fonts are too large when scaled down.

Example:

@media screen and (max-width: 767px) {
  h1 {
    font-size: 28px;
  }
}

You can do the same with paragraph text, buttons, or even line height.

Tip: Don’t go too small. Keep accessibility in mind and aim for at least 16px on mobile.

4. Use plugins for enhanced mobile styling

This is where our Squarespace plugins come in.

We’ve built smart, designer-approved plugins that give you more control over things like mobile navigation, stacked layouts, button spacing, and image handling — without needing to write custom code every time.

Whether you're trying to stop mobile sections from stacking weirdly or want more elegant transitions between sections, there’s likely a plugin that can solve it in a few clicks.