# Hallmark Mobile Non-Negotiables: Overflow-X Clip, Button Wrapping Prevention, and Grid Track Rules > Discover Hallmark's mobile non-negotiables: overflow-x clip, button wrapping prevention, and grid track rules. Ensure scroll-free, stable layouts on all devices. - Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark) - Tags: deep-dive - Published: 2026-08-04 --- **Hallmark enforces three strict mobile non-negotiables—root `overflow-x: clip`, single-line clickable text via `white-space: nowrap`, and `minmax(0, 1fr)` for image-bearing grid tracks—to guarantee scroll-free, stable layouts on viewports from 320 px to 768 px.** The Nutlope/hallmark repository defines these constraints as unbreakable "gates" that every page must pass. Violating any of the three rules triggers an automated *slop-test* rejection, blocking deployment until fixed. Below is the complete technical specification for implementing and verifying each requirement. --- ## Root Overflow-X: Clip (Never Hidden) Horizontal scrolling on mobile is considered a critical failure in Hallmark. The fix is surgical: both `` and `` must declare `overflow-x: clip`—not `hidden`, not `auto`, not `scroll`. Per [[`skills/hallmark/references/responsive.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/responsive.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/responsive.md) lines 9–13, this rule is **gate 34**. The distinction between `clip` and `hidden` matters: `clip` prevents scroll without establishing a new formatting context that could interfere with `position: sticky` or other layout behaviors. ```css html, body { overflow-x: clip; /* gate 34: prevents horizontal scroll */ } ``` The global declaration lives in [[`site/css/base.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/base.css)](https://github.com/Nutlope/hallmark/blob/main/site/css/base.css). No exceptions are permitted—every Hallmark page inherits this foundation. --- ## Clickable Text Must Never Wrap Buttons, navigation links, footer links, breadcrumbs, and CTAs must render on a **single line** at every viewport width. This is **gate 49**, codified in [[`responsive.md`](https://github.com/Nutlope/hallmark/blob/main/responsive.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/responsive.md) lines 59–71. Use `white-space: nowrap` as the enforcement mechanism. If content exceeds available space, shorten the label rather than allowing wrapping. ```css /* gate 49: all clickable affordances stay single-line */ .btn, .nav__link, .foot__link, .breadcrumb__item, .cta { white-space: nowrap; } /* Optional: alternate short labels for cramped breakpoints */ .btn[data-short]::after { content: attr(data-short); } ``` The utilities are centralized in [[`site/css/components.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/components.css)](https://github.com/Nutlope/hallmark/blob/main/site/css/components.css). Test every interactive element at 320 px width—wrapping at any point fails the gate. --- ## Image-Bearing Grid Tracks Use minmax(0, 1fr) Grid tracks containing images or media must use `minmax(0, 1fr)` sizing. The bare `1fr` shortcut is **prohibited**—this is **gate 50** from [[`responsive.md`](https://github.com/Nutlope/hallmark/blob/main/responsive.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/responsive.md) line 11. The `minmax(0, 1fr)` declaration allows the track to shrink below its content's intrinsic size, preventing images from forcing the grid wider than the viewport. Tracks without images may use other sizing strategies, but any media-holding track must comply. ```css /* gate 50: safe grid tracks for images */ .gallery { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } /* Image-bearing track: compliant */ .card__media { /* track assigned minmax(0, 1fr) in parent grid */ } /* Non-image track: flexible, but gate 50 still applies to image columns */ .card__content { /* may use different sizing if no media present */ } ``` Practical implementations appear across component and section stylesheets in the repository. --- ## Complete Implementation Reference Combine all three non-negotiables in a single template: ```html ``` --- ## Verification and Enforcement Hallmark runs automated *slop-tests* against gates 34, 49, and 50. A failing build indicates: - **Gate 34 failure:** `overflow-x` is `hidden`, missing, or applied to wrong elements - **Gate 49 failure:** A button or link computes to multiple lines at any tested width - **Gate 50 failure:** An image grid track uses bare `1fr` instead of `minmax(0, 1fr)` Manual verification at 320 px, 375 px, and 768 px widths is recommended before commit. --- ## Summary - **`overflow-x: clip` on `html` and `body`** (gate 34) eliminates horizontal scroll without `hidden`'s side effects - **`white-space: nowrap` on all clickable text** (gate 49) guarantees single-line buttons and navigation - **`minmax(0, 1fr)` for image grid tracks** (gate 50) prevents media from breaking viewport constraints These three Hallmark mobile non-negotiables form a hard floor for responsive integrity. Source definitions live in [[`skills/hallmark/references/responsive.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/responsive.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/responsive.md); global styles reside in [[`site/css/base.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/base.css)](https://github.com/Nutlope/hallmark/blob/main/site/css/base.css) and [[`site/css/components.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/components.css)](https://github.com/Nutlope/hallmark/blob/main/site/css/components.css). --- ## Frequently Asked Questions ### Why does Hallmark require `overflow-x: clip` instead of `hidden`? The `clip` value prevents horizontal scrolling while avoiding the new formatting context that `hidden` creates. This preserves `position: sticky` behavior and other layout features that `hidden` would break. The distinction is enforced as gate 34 in the Hallmark specification. ### What counts as "clickable text" under the nowrap rule? Buttons, primary navigation links, footer links, breadcrumbs, and call-to-action elements all fall under gate 49. Any element triggering navigation, submission, or conversion must stay single-line. If text overflows, the approved fix is shortening the label—not removing `white-space: nowrap`. ### Can I use `1fr` in grid columns that don't contain images? Non-image tracks have flexibility, but any track that **might** contain an image—even conditionally—must use `minmax(0, 1fr)`. Gate 50 is conservative: when in doubt, apply the `minmax` pattern. Bare `1fr` is only safe for tracks guaranteed image-free across all page states. ### How are these rules enforced in the Hallmark build pipeline? The automated *slop-test* suite runs gates 34, 49, and 50 against every build. Each gate maps to a specific CSS pattern check. Failure blocks deployment with a descriptive error referencing the violating file and line. No manual override exists—these are true non-negotiables.