Breakpoint and stacking

The NSW Email Design System uses a single responsive breakpoint at 639px to manage layout changes between desktop and mobile views. This approach simplifies responsive behaviour while maximising compatibility across email templates.

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.

How does this help?

• It makes emails easier to read on mobile phones.
• It keeps the layout clean and simple.
• It works well with most email apps and devices.
• It avoids using advanced layout tools like Flexbox or CSS Grid, which some email apps don’t support.

Further notes for developers

• Use .mobile-12 for mobile padding.
• Use .mobile-centre to centre images or text on mobile.
• Containers like .wrapper and .row change to 90% or 100% width when the screen is smaller than 640px.