A breakpoint is a screen width at which a page's layout changes, written in CSS as a media query. Designing at 1440, 810 and 390 pixels gives you one deliberate layout each for desktop, tablet and phone. Everything between those widths has to stretch fluidly, because almost no real screen matches any of the three exactly. Treat them as design anchors, not as the only sizes your site will meet.
What a breakpoint actually is
Browsers report a viewport width in CSS pixels, not physical pixels. A phone with a sharp screen may have well over a thousand physical pixels across, but it tells the page it is roughly 390 CSS pixels wide, so text stays readable. That only works if the page includes the viewport meta tag (<meta name="viewport" content="width=device-width, initial-scale=1">). Without it, phones render the page at a desktop width and shrink it down.
A media query then applies different styles above or below a width:
/* Phone first: one column */
.features { display: grid; grid-template-columns: 1fr; gap: 24px; }
/* Tablet range */
@media (min-width: 810px) {
.features { grid-template-columns: repeat(2, 1fr); }
}
/* Desktop range */
@media (min-width: 1200px) {
.features { grid-template-columns: repeat(3, 1fr); }
}
Notice the difference between a design width and a breakpoint. You draw the desktop layout at 1440, but the desktop styles usually switch on earlier, often around 1200, so a 1280px laptop also gets the desktop layout. One common split is phone up to 809px, tablet from 810 to 1199px, and desktop from 1200px up. Each layout is drawn at one width and has to hold up across its whole range.
Why 1440, 810 and 390
These are the three widths FNJ's AI website builder designs every page at, and they are a sensible set for any marketing site, whatever tool you use.
1440: the desktop canvas
1440 is wide enough to show a full desktop layout with multi-column grids and a complete navigation bar, and it sits in the middle of common laptop and monitor widths. The content itself usually lives in a centered container of roughly 1100 to 1280px. That container is what keeps lines readable on a 1920px monitor and stops the layout from overflowing on a 1280px laptop.
810: the tablet held upright
810 is roughly the width of a standard iPad in portrait. It also covers small laptop windows and split-screen browsing. At this width there is room for two columns, but not for a five-link navigation bar with a button beside it.
390: the phone
390 is the CSS width of several recent iPhone models, and most current phones land somewhere in the high 300s to low 400s. Design at 390, then check at 360 and 430 to make sure the same layout survives both narrower and larger phones.
Why three and not six
Every breakpoint is another layout to design, build and keep consistent when you change something later. Three widths cover the changes that matter most: column count, navigation and type scale. Smaller adjustments between them are better handled with fluid units than with extra media queries. Google's responsive web design basics on web.dev makes the same point from the other direction: add a breakpoint where your content starts to break, not for a device name.
What should change at each width
The values below are examples, not rules. The point is the direction of each change.
| Element | Desktop (1440) | Tablet (810) | Phone (390) |
|---|---|---|---|
| Navigation | Full row of links plus a button | Fewer links, or a menu button; keep the main button visible | Logo, menu button, maybe one short call to action |
| Hero heading | Largest size, around 64 to 80px | Around 48 to 56px | Around 36 to 44px, with sensible line breaks |
| Body text | About 18px | 17 to 18px | 16 to 17px, never smaller |
| Card grids | 3 or 4 columns | 2 columns | 1 column, stacked |
| Section padding | Generous, around 120px top and bottom | Around 80px | Around 56 to 64px |
| Image and text pairs | Side by side | Side by side or stacked | Stacked, image often cropped taller |
| Button pairs | Inline | Inline | Stacked or full width |
| Footer | Several link columns | Two columns | One column |
Type scale
A 72px headline holds a full sentence on desktop. At 390px the same size fits two or three words per line and pushes everything else below the fold. Phones need both smaller sizes and a gentler ratio between heading levels, so an H2 does not look like a second H1. On desktop, keep body text to a comfortable measure of roughly 60 to 80 characters per line by limiting the text container's width.
Columns and reading order
When a three-column grid stacks into one column, the order in the HTML becomes the reading order. If the most important card is third in the code, it ends up third on a phone, below two scrolls of less important content. Decide the order with the phone in mind.
Navigation
Five or six links fit comfortably at 1440. At 810 they start to crowd, and at 390 they need a menu button. Keep the primary action (Book, Get a quote, Start) visible outside the menu if you can, because that is the link most phone visitors came for.
Images
Images rarely scale well by simply getting smaller. A wide team photo that works at 1440 becomes a strip of tiny faces at 390. Crop it taller for phones, or swap in a different crop. Text placed over a photo needs a stronger overlay on small screens, where the busiest part of the image tends to sit behind the words.
The gaps between breakpoints are where sites break
Layout bugs tend to show up at widths like 1024, 600 or 360, not at the widths you designed. Fluid techniques keep the in-between widths honest:
- Containers with a max width and side padding, instead of fixed widths like
width: 1200px. - Fluid type with
clamp(), for examplefont-size: clamp(2.25rem, 1.5rem + 3vw, 4.5rem);, so headings grow and shrink smoothly between breakpoints. - Wrapping grids, such as
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));, which fit as many columns as the space allows. min-width: 0on flex children, so long text can shrink instead of pushing its container wider than the screen.overflow-wrap: anywhereon text that might contain long email addresses, URLs or compound words.max-width: 100%; height: auto;on images, so they never exceed their container.
How to check a responsive site
- Drag the window slowly from very wide to very narrow on a desktop browser. Watch for overlaps, cut-off text, awkward single-word lines and a horizontal scrollbar appearing.
- Use your browser's device mode to test fixed widths: 1440, 1280, 1024, 810, 600, 430, 390 and 360.
- Check for sideways scrolling by pasting this into the console:
document.documentElement.scrollWidth > document.documentElement.clientWidth. If it returnstrue, something is wider than the screen. This line lists the culprits:[...document.querySelectorAll('*')].filter(el => el.getBoundingClientRect().right > window.innerWidth). - Open the site on a real phone. Tap every button, open and close the menu, rotate the phone sideways and see how much of the screen a sticky header takes.
- Zoom to 200% on desktop. Text should reflow into the space, not spill off the side. Our accessibility checklist for small sites covers this test and others.
- Stress the content. Replace a headline with one twice as long, and paste a long email address into the footer. Real content is never as tidy as the placeholder you designed with.
Common mistakes
- Designing desktop only and assuming the phone version will sort itself out.
- Absolute positioning for layout. Boxes pinned to coordinates look right at the width they were drawn at and overlap everywhere else. It is a big part of why screenshot-to-code output breaks on phones.
- Chasing device models with a breakpoint for every phone. There are too many, and new ones ship every year.
- Hiding content on phones because it is inconvenient to fit. A phone visitor often needs the same information as a desktop visitor.
- Scaling everything proportionally, so the tablet layout is just the desktop layout shrunk until the text is tiny.
- Full-height heroes set to
100vh. Mobile browser toolbars change the visible height, so the bottom of the hero can sit behind them. Thesvhanddvhunits, or amin-height, behave better. - Hover-only interactions, like menus that open on hover. Touchscreens do not hover.
- Disabling zoom with
user-scalable=noin the viewport tag. It makes the site harder to read for anyone who needs larger text. - Shipping desktop-sized images to phones, which slows the page on the connection where speed matters most.
How FNJ handles the three widths
FNJ's AI designs every page at desktop 1440, tablet 810 and phone 390 at the same time, each with its own type sizes and layout, using real flex and grid layouts rather than absolutely positioned boxes. If something looks off at one width, describe it in plain words or select the element on the canvas and adjust its spacing or layout. The export is a Next.js project with plain CSS per breakpoint, or static HTML with one stylesheet, so a developer can read and change it. You should still run the checks above before launch; you can see how FNJ's AI website builder designs each page at three widths and decide whether it fits your project.
Frequently asked questions
What are the standard responsive breakpoints?
There is no official standard. Many teams design at a desktop width around 1440px, a tablet width around 768 to 834px and a phone width around 360 to 430px, then let the layout stretch fluidly between them. The right breakpoints are wherever your content starts to look wrong.
Why design the phone layout at 390 instead of 375?
375 was the CSS width of several older iPhone models, while 390 matches several newer ones and sits close to the rest. Either is a reasonable design width, as long as you also test at 360 and 430 to cover narrower and larger phones.
How many breakpoints does a website need?
Most marketing sites need three layouts: desktop, tablet and phone. More breakpoints add maintenance work, and the small differences between sizes are usually better handled with fluid type, flexible grids and max-width containers.
Should I design mobile first?
Writing CSS mobile first, with min-width media queries, tends to produce simpler code. For design, the important part is planning all three layouts together, because decisions like content order and navigation affect the phone most.
Do breakpoints affect SEO?
Google primarily uses the mobile version of a page for indexing, so a phone layout that hides content or is hard to use can hurt. A responsive site that serves the same content at every width avoids that problem.