What Is a Mobile Breakpoint?
A mobile breakpoint is a screen width that triggers a layout shift. It tells your design when to switch from desktop layout (side-by-side columns) to mobile layout (stacked columns).
Screens narrower than the breakpoint use the mobile layout.
Screens wider than the breakpoint use the desktop layout.
Breakpoint vs. Width: What's the Difference?
In Knak, you can set both a Width and a Breakpoint. They serve different purposes:
Width is the maximum width of your email or page.
Breakpoint is the trigger where the layout shifts between mobile and desktop.
You can set the default values for your assets on the admin side of the platform under the settings section:
And you can override those settings from the asset level under the settings section:
Example: How It Works
If your email has:
Width: 600px
Breakpoint: 580px
Then here’s what users see:
Screen Size | How it Looks | Why |
Below 580px (most phones) | Mobile View | Columns stack vertically for better readability. |
580px to 600px | Desktop View | Columns display side-by-side, slightly compressed. |
Above 600px (laptops) | Desktop View | Email is centered with empty space on each side. |
How To Choose the Right Breakpoint
Ask yourself:
"What is the narrowest screen width where my desktop layout still looks great?"
Use that value as your breakpoint. Any screen narrower than this should use the stacked mobile layout.
Common Breakpoints
Emails:
Use a breakpoint just below your email's total width.
For a 600px email, try 580px–620px.
Suggested mobile width: 480px.Landing Pages:
These vary by layout.
Common breakpoints: 580px or 768px.
Suggested mobile width: 580px.
Pitfalls To Avoid
Setting the Breakpoint Too Small
Problem: Breakpoint set at 320px for a 600px email.
Result: Side-by-side layout displays even on small phones. Text may appear too small or cramped.
Setting the Breakpoint Too Large
Problem: Breakpoint set at 800px for a 600px email.
Result: Mobile layout appears even on large desktop screens, wasting space.
Final Tip: Always Preview
Use Knak’s Email Testing feature to see how your design looks across screen sizes. This helps ensure a great experience on all devices.
Need more help? Contact support via live chat using the chat bubble in the bottom right corner or email support@knak.com.