Breakpoint and stacking

The NSW Email Design System uses a single responsive breakpoint at 639px.

When the screen is 639px or narrower, the layout switches to a mobile-friendly format:

• columns stack vertically
• images and text expand to full width
• spacing adjusts for readability.

Above 640px, layouts use fixed-width tables (usually 640px), with columns displayed side by side. This ensures balance and alignment on larger screens.

What happens at 639px?

• If the screen is 639 pixels wide or smaller, the email layout changes to fit a small screen.
• Columns stack on top of each other to make reading easier on a phone.
• Text and images become full width, so users don't need to scroll sideways.
• Padding and spacing also adjust to make everything easier to see.

What happens at 640px or bigger?

• On wider screens (like desktop), the layout uses fixed-width tables.
• Columns appear side by side.
• Content does not stretch too wide.

When to use it

Use breakpoint and stacking features when you need to:

• keep multi-column layouts readable on mobile
• prevent sideways scrolling by allowing images and text to expand
• apply alignment or centring only for mobile
• hide or show content based on screen size.

How it works

• A media query activates at 639px.
• Utility classes prefixed with mobile- apply mobile–specific stacking or alignment rules.
• Containers such as .wrapper and .row change from fixed width to fluid (90% or 100%).
• The layout maintains reading order – source order matches stacking order.

Utility classes

Examples

<x-columns columns="2" col1Width="1/2" col2Width="1/2" gutter="16">
  <slot:col1>
    <img src="feature.png" class="mobile-center" alt="Feature image">
  </slot:col1>
  <slot:col2>
    <p>Supporting text for the feature goes here.</p>
  </slot:col2>
</x-columns>

• On desktop: columns sit side by side at equal width.
• On mobile: columns stack, the image expands full width, and .mobile-center ensures it is centred.

Do / Don't

Do

• Use .mobile-12 for predictable column stacking.
• Combine alignment helpers (.mobile-center, .mobile-text-center) with columns.
• Test across multiple devices and email clients.

Don't

• Hide critical content with .hide-on-mobile.
• Assume margins will behave the same everywhere–use padding and table structure.
• Overcomplicate breakpoints–the single 639px rule covers the majority of use cases.