What Is a Mobile Breakpoint?
A mobile breakpoint is a screen width that triggers a layout change. It tells your design when to switch between desktop and mobile layouts.
Screens narrower than the breakpoint use the mobile layout.
Screens wider than the breakpoint use the desktop layout.
In most designs, the desktop layout shows columns side-by-side. The mobile layout stacks columns vertically for easier reading.
Breakpoint vs. Width
In Knak, you can configure both a Width and a Breakpoint. Each setting controls a different part of your design.
Setting | Description |
Width | The maximum width of your email or landing page. |
Breakpoint | The screen width where the layout switches between desktop and mobile views. |
Where to Set Default Values
You can configure default values in the Admin Settings.
Open Settings in the admin area.
Set the default width and default breakpoint for assets.
Override Settings at the Asset Level
You can also change these settings for a specific email or landing page.
Open your asset.
Click Settings.
Adjust the Width or Breakpoint values.
How To Choose the Right Breakpoint
Ask this question when selecting a breakpoint:
“What is the narrowest screen width where the desktop layout still looks good?”
Use that width as your breakpoint. Any screen narrower than that value should switch to the stacked mobile layout.
Example Configuration
Width: 600px
Breakpoint: 580px
Screen Size | Layout | Reason |
Below 580px (most phones) | Mobile view | Columns stack vertically. Improves readability. |
580px–600px | Desktop view | Columns remain side-by-side. Layout becomes slightly compressed. |
Above 600px (laptops) | Desktop view | Email stays centered with space on both sides. |
Common Breakpoints
The best breakpoint depends on the type of asset you are building. Use the examples below as a starting point.
Email Designs
Most marketing emails are 600px wide. This is the industry standard for email clients.
Use a breakpoint close to the email width so the layout switches to mobile before the content becomes cramped.
Setting | Recommended Value | Why |
Email Width | 600px | Standard email width |
Breakpoint | 580px–620px | Triggers mobile layout before columns get squeezed |
Mobile Width | ~480px | Comfortable width for most phones |
Example
If your email width is 600px:
Desktop layout appears on screens wider than ~580px
Mobile layout appears on screens smaller than ~580px
Landing Pages
Landing pages can be much wider than emails. Breakpoints depend on how many columns your layout uses.
Layout Type | Recommended Breakpoint |
Simple layouts | 580px |
Multi-column layouts | 768px |
Suggested mobile width: 580px
Tip: If your layout has many columns, choose a larger breakpoint so content stacks earlier.
Pitfalls To Avoid
Setting the Breakpoint Too Small
Example: Breakpoint set to 320px for a 600px email.
Problem:
The desktop layout stays active on small phones.
Text and columns appear cramped.
Result:
Poor mobile readability.
Setting the Breakpoint Too Large
Example: Breakpoint set to 800px for a 600px email.
Problem:
Mobile layout appears on large screens.
Result:
Desktop users see unnecessary stacked content.
Screen space is wasted.
Final Tip: Always Preview
Use Knak’s Email Testing feature before publishing.
Preview your design across multiple screen sizes. This ensures your layout works well on both desktop and mobile devices.
Need more help? Contact support via live chat using the chat bubble in the bottom right corner or email support@knak.com.