# Hallmark's Mobile Responsiveness Non-Negotiables: 7 Hard Rules That Abort the Build

> Discover Hallmark's 7 mobile responsiveness non-negotiables. Learn their strict build rules including viewport checks and zero horizontal scroll tolerance to ensure flawless mobile experiences.

- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: best-practices
- Published: 2026-07-13

---

**Hallmark treats mobile responsiveness as a hard floor—every page must pass seven strict non-negotiables including four mandated viewport checks, zero horizontal scroll tolerance, and unwrappable clickable text, or the build aborts immediately.**

The Hallmark project (Nutlope/hallmark) codifies mobile responsiveness as a gatekeeping phase in its build pipeline. According to [`skills/hallmark/references/responsive.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/responsive.md), every emitted page undergoes a slop-test phase that validates specific CSS and layout constraints at defined breakpoints. These rules are exposed to the build system via [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) at line 54 and enforced both automatically by the test suite and manually by developers.

## The Four Mandated Viewport Gates

Hallmark requires visual validation at exactly four CSS pixel widths: **320 px**, **375 px**, **414 px**, and **768 px**. A layout failure at any of these widths aborts the build. This rule appears in the **Mobile—non-negotiable** section of [`responsive.md`](https://github.com/Nutlope/hallmark/blob/main/responsive.md) and serves as the foundation for all subsequent gate checks.

## Layout and Overflow Constraints

### Zero Horizontal Scroll (Gate 34)

The `html` and `body` elements must carry `overflow-x: clip`. The specification explicitly forbids `overflow-x: hidden`, which can fail in certain mobile browsers. This gate is documented at lines 9–13 of [`responsive.md`](https://github.com/Nutlope/hallmark/blob/main/responsive.md).

```css
html,
body {
  overflow-x: clip; /* never hidden */
}

```

### Image Grid Integrity (Gate 50)

Grid tracks containing images cannot rely on bare `1fr` units. They must use `minmax(0, 1fr)` to prevent overflow when images exceed track boundaries. This constraint appears at line 11 of the responsive reference.

```css
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.grid img {
  width: 100%;
  height: auto;
}

```

## Text and Navigation Rules

### Unwrappable Clickable Text (Gate 49)

Buttons, primary navigation links, footer links, breadcrumbs, tabs, and CTAs must remain on a single line from **320 px up to 1920 px**. The remediation hierarchy is strict: first shorten the label, then apply `white-space: nowrap`, then hide low-priority items, and finally collapse into a sheet or menu.

```css
.btn,
.nav__link,
.foot__link,
.cta {
  white-space: nowrap;
}

```

### Header Word Breaking (Gate 51)

Display headers must accommodate long words without breaking layout. The required declaration pair is `overflow-wrap: anywhere` combined with `min-width: 0`, documented at lines 13–14.

```css
h2 {
  overflow-wrap: anywhere;
  min-width: 0;
}

```

### Section Head Collapse (Gate 52)

Every theme variant must provide a mobile rule that forces section headings into a single column. This requirement appears at lines 14–15 of [`responsive.md`](https://github.com/Nutlope/hallmark/blob/main/responsive.md) and ensures structural integrity on narrow screens, often implemented via media queries that hide rails and activate sheet toggles.

```css
@media (max-width: 40rem) {
  .nav__rail { display: none; }
  .nav__sheet-toggle { display: grid; }
}

```

## Interaction Stability

### No Scroll-Jump on Radio Tabs (Gate 53)

Interactive radio tabs must not trigger viewport jumps on click. Implementations keep radios in normal document flow or guard focus with `focus({ preventScroll: true })`, as noted at lines 15–16 of the reference file.

## Enforcement and Test Artifacts

These non-negotiables are flagged during the slop-test phase according to [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) at line 54. Concrete utilities reside in [`site/css/components.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/components.css) (e.g., `.spec__viz--responsive`), while passing examples appear in `site/_tests/*/output.css` artifacts.

## Summary

- Hallmark validates four specific viewports: 320 px, 375 px, 414 px, and 768 px.
- `overflow-x: clip` is mandatory on `html` and `body` elements; `hidden` is prohibited.
- Clickable text must stay single-line from 320 px to 1920 px using a defined fix hierarchy.
- Image grids require `minmax(0, 1fr)` to prevent overflow.
- Headers need `overflow-wrap: anywhere` and `min-width: 0` for long words.
- Section heads must collapse to single columns on mobile.
- Radio tabs must prevent scroll jumps via `focus({ preventScroll: true })` or normal flow.

## Frequently Asked Questions

### What happens if a page fails one of the four viewport checks?

The build aborts immediately. Hallmark treats these checks as hard gates, meaning any horizontal overflow, wrapping clickable text, or scroll jump at 320 px, 375 px, 414 px, or 768 px prevents deployment.

### Why does Hallmark require `overflow-x: clip` instead of `hidden`?

The `clip` value provides more consistent behavior across mobile browsers and prevents subtle scrolling issues that `hidden` can trigger on iOS Safari and Chrome mobile. This distinction is codified at gate 34 in [`responsive.md`](https://github.com/Nutlope/hallmark/blob/main/responsive.md).

### How does Hallmark handle long navigation labels that exceed viewport width?

Developers must follow a strict hierarchy: first shorten the label text, then apply `white-space: nowrap`, then hide low-priority items, and finally collapse the navigation into a sheet or menu. Wrapping is never permitted.

### Where are these rules implemented in the codebase?

The canonical rules live in [`skills/hallmark/references/responsive.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/responsive.md), exposed to the build pipeline via [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) at line 54, with concrete CSS utilities in [`site/css/components.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/components.css) and verified test artifacts in `site/_tests/*/output.css`.