Devices are examples, not breakpoints
Mobile, tablet and desktop presets make testing convenient. They cannot tell you where your content needs a layout change. A translated label, longer heading or larger default font may expose a problem between those familiar sizes.
Start wide and narrow slowly. Look for a specific failure: a label wraps awkwardly, a sidebar becomes unreadable, or controls collide. Change the layout because of that failure.
Test around each change
If a grid switches at 640px, inspect 639px, 640px and 641px. A max-width: 640px condition includes 640px. A matching min-width: 640px also includes it, so overlapping rules can both apply at that width.
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 640px) {
.cards {
grid-template-columns: 1fr;
}
}
The inspector recognizes pixel-based min/max-width conditions joined by AND. Other conditions are labeled unresolved rather than guessed. The browser still evaluates the real CSS, including conditions the inspector does not understand.
Keep a meaningful source order
Rearrangement does not rewrite the document. Keyboard focus and screen-reader order generally follow the source. Put content in a sensible order before moving it visually through Grid placement or Flexbox order.
Check that text can grow, controls remain reachable, and important content stays available on small screens. Browser zoom is useful because it reduces effective layout width while enlarging text.
Know what simulation leaves out
A 375px iframe can test CSS at that width. It does not become a phone. Rendering engines, input methods, dynamic browser bars, safe areas, fonts and performance may differ.
Codipry previews your own isolated output. External websites may reject embedding through CSP or X-Frame-Options; the tool respects that restriction.
Try one change
Run the sample, choose Mobile, then test widths from 620px to 660px. Rotate and compare devices side by side. Test the finished design on a real device/browser before shipping.