Hallmark Mobile Non-Negotiables: Overflow-X Clip, Button Wrapping Prevention, and Grid Track Rules
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 <html> and <body> 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) 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.
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). 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/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.
/* 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). 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/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.
/* 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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<style>
/* gate 34: root overflow-x clip */
html, body { overflow-x: clip; }
/* gate 49: no wrapping on clickable text */
.btn, .nav__link, .foot__link, .cta { white-space: nowrap; }
/* gate 50: image-safe grid tracks */
.gallery {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
</style>
</head>
<body>
<!-- page content -->
</body>
</html>
Verification and Enforcement
Hallmark runs automated slop-tests against gates 34, 49, and 50. A failing build indicates:
- Gate 34 failure:
overflow-xishidden, 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
1frinstead ofminmax(0, 1fr)
Manual verification at 320 px, 375 px, and 768 px widths is recommended before commit.
Summary
overflow-x: cliponhtmlandbody(gate 34) eliminates horizontal scroll withouthidden's side effectswhite-space: nowrapon all clickable text (gate 49) guarantees single-line buttons and navigationminmax(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); global styles reside in [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).
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.
Have a question about this repo?
These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:
curl -s "https://instagit.com/install.md" 
Maintain an open-source project? Get it listed too →