Purpose-Built Templates

ZU2B Blueprints

Business in a Box

  • Purpose-built launch kits for local service businesses — website, copy, prompts, SEO, and more.
  • Local Launch Kits →

Website Widgets

  • Working features you install once and own outright — no plugin, no subscription.
  • Chat Widget — Coming Soon

Reference

ZU2B Pulse™

See what visitors experience before they leave — paste any public URL and get a plain-English performance report in seconds.

Scan Your URL Free

Mobile breakpoint explicitly setting 1fr 1fr overrides any narrower fix

Field Note #180
🔬 Resolved 🟡 Intermediate ⏱ 30 Minutes ✓ Observation from Experience

⚡ Quick Fix (TL;DR)

The Fix: 1. Find the lowest explicit grid column breakpoint in the CSS.
2. Confirm whether it is setting a specific column count (e.g., `1fr 1fr`) rather than just resetting other properties.
3. If so, that rule controls mobile layout regardless of what narrower breakpoints say — unless those narrower breakpoints also set the grid columns explicitly.
4. Verify any new breakpoints are inside the active “ tag, not in a comment block.
Edit the existing `600px` (or lowest active) breakpoint directly. Change `grid-template-columns: 1fr 1fr` to `grid-template-columns: 1fr`. Do not add a second narrower breakpoint — fix the one that's already firing.

```css
@media (max-width: 600px) {
  .grid-class { grid-template-columns: 1fr; }
}
```
Was this helpful? Thanks for the feedback!
The symptom
A showcase page’s kit/card grid appeared stretched and side-by-side on mobile phones even after adding a narrower breakpoint (`420px`) intended to force single-column layout. The cards did not stack.

Why it happens
The existing `600px` breakpoint was explicitly setting `grid-template-columns: 1fr 1fr` — locking the 2-column layout in. A new `420px` breakpoint added below it with `grid-template-columns: 1fr` appeared to be the right fix, but in this case the `420px` rule ended up appended outside the active `<style>` block (inside the CSS comment section at the bottom of the file), so it never applied.
 
Even if the `420px` rule had been placed correctly, the `600px` rule would have continued to enforce `1fr 1fr` on most standard phone viewports (375–390px wide) because the `600px` rule applies first and most phone widths fall below 600px where — counterintuitively — the breakpoint is still in effect if not overridden by a lower breakpoint that’s also active.

What to check

1. Find the lowest explicit grid column breakpoint in the CSS.
2. Confirm whether it is setting a specific column count (e.g., `1fr 1fr`) rather than just resetting other properties.
3. If so, that rule controls mobile layout regardless of what narrower breakpoints say — unless those narrower breakpoints also set the grid columns explicitly.
4. Verify any new breakpoints are inside the active `<style>` tag, not in a comment block.

The fix
Edit the existing `600px` (or lowest active) breakpoint directly. Change `grid-template-columns: 1fr 1fr` to `grid-template-columns: 1fr`. Do not add a second narrower breakpoint — fix the one that’s already firing.

“`css
@media (max-width: 600px) {
  .grid-class { grid-template-columns: 1fr; }
}
“`

Lesson
When a mobile layout isn’t stacking, the problem is almost always an existing breakpoint explicitly holding the multi-column layout — not a missing narrower breakpoint. Fix the existing rule rather than adding another one. Always verify new CSS rules are inside the active `<style>` block, not in appended comment sections.

Tagged in :

More from the field