What Is a Mobile Breakpoint?
Think of a mobile breakpoint as a "tipping point" for your design based on screen width. It's a specific width, measured in pixels (px), that tells your layout when to change.
If a screen is narrower than the breakpoint, it will display your mobile layout (e.g., stacked columns).
If a screen is wider than the breakpoint, it will display your desktop layout (e.g., side-by-side columns).
Breakpoint vs. Overall Width: What's the Difference?
In your design settings, you'll see both "Width" and "Breakpoint." They work together but have different jobs.
Width: This is the maximum width of your entire email or page. Think of it as the picture frame; your design will never get wider than this value.
Breakpoint: This is the trigger point within that frame where the content inside shifts between the desktop and mobile layouts.
How It Works: An Example
Let's imagine you're building an email with a Width of 600px and you set the Breakpoint to 580px. Here’s what happens on different screen sizes:
Screen Size | How it Looks | Why? |
Below 580px (e.g., most phones) | Mobile View | The screen is narrower than the 580px breakpoint, so columns stack vertically for easy reading. |
Between 580px and 600px | Desktop View | The screen is wider than the breakpoint, so columns appear side-by-side, slightly compressed to fit the available space. |
Above 600px (e.g., laptops) | Desktop View | The email is shown at its maximum 600px width, with empty space appearing on the sides of the screen. |
The Golden Rule for Choosing Your Breakpoint
To find the perfect setting, ask yourself one question:
"What is the narrowest width at which my desktop layout still looks great?"
That width is likely your ideal breakpoint. Any screen narrower than that should get the clean, stacked mobile view.
Some Common Breakpoints
For Emails: A good rule of thumb is to set the breakpoint just below your email's total width. For a 600px wide email, a breakpoint between 580px and 620px is a great starting point.
For Landing Pages: Since landing pages can be much wider and their designs vary greatly, the optimal breakpoint will depend on your specific layout. Common breakpoints are 580px and 768px.
Pitfalls to Avoid
Setting the breakpoint too small:
The Problem: On a 600px wide email, you set a very low breakpoint like 320px.
The Result: Your side-by-side desktop columns will be displayed on all screens wider than 320px. On a standard phone screen (e.g., 375px wide), this may look very compressed and be difficult to read.
Setting the breakpoint too large:
The Problem: On a 600px wide email, you set a breakpoint of 800px.
The Result: Although your design's width is capped at 600px, your stacked, mobile layout will display on all screen sizes below 800px. This means even users on larger desktop screens will see the single-column stacked layout within the 600px frame, despite having plenty of space.
Final Tip: Always Preview!
The best way to see how your breakpoint behaves is to test it. Use Knak's Email Testing feature to see how your content renders across different devices!
Need more help? Contact support via live chat within Knak using the chat bubble in the bottom right corner or email support@knak.com