Inspect the working example
The rule uses min-width:600px. The first view is one column; the media rule introduces two columns at the threshold, including exactly 600px.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| Below | Viewport 599 | Condition false; one column |
| Boundary | Viewport 600 | Condition true; two columns |
| Above | Viewport 601 | Condition true; two columns |
Follow the browser mechanism
min-width includes equality at the stated CSS-pixel value. Device physical pixels and screenshot resolution are not the same measurement. This lesson is about testing the exact condition; it is distinct from preserving content order or querying a component’s own container.
A one-pixel typo can hide in broad tests
The alternative changes the threshold to 601px. Broad 390px and 960px tests still look plausible.
<style>body{margin:8px}</style>
<style>.view{display:grid;grid-template-columns:1fr}@media(min-width:601px){.view{grid-template-columns:1fr 1fr}}</style><section class="view"><p>Source</p><p>Preview</p></section>At exactly 600px the alternative still has one column, unlike the specified rule.
Try the repair
Does testing only 390px and 960px distinguish min-width 600 from min-width 601?
Show the worked answer
No. Both conditions are false at 390 and true at 960. Test the exact 600px boundary.
- Record matchMedia and measured grid positions at599/600/601.
- Use CSS pixels in the test environment.