# Hallmark's Requirements for Mobile Responsiveness: A Complete Technical Guide

> Understand Hallmark's mobile-first architecture directly from the Nutlope repository. Learn essential requirements for flawless responsiveness at key viewports, validated by automated tests.

- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: how-to-guide
- Published: 2026-07-20

---

**Hallmark enforces a strict mobile-first architecture requiring all outputs to render flawlessly at 320px, 375px, 414px, and 768px viewports without horizontal scroll, wrapped affordances, or layout breaks, validated by automated "slop-test" gates.**

The Hallmark design system mandates rigorous mobile responsiveness standards that extend far beyond standard media queries. According to the source code in [`skills/hallmark/references/responsive.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/responsive.md) and the automated validation defined in [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md), every component must pass specific gates that prohibit horizontal overflow, enforce single-line interactive elements, and mandate precise CSS architectural patterns across all mobile viewport sizes.

## Non-Negotiable Viewport Standards

Hallmark requires all pages to render without errors at four specific CSS-pixel widths: **320px**, **375px**, **414px**, and **768px**. These dimensions cover the most common mobile device viewports, from legacy smartphones to tablets.

As documented in the "Mobile — non-negotiable" section of [`responsive.md`](https://github.com/Nutlope/hallmark/blob/main/responsive.md), these widths serve as hard floors for the automated testing suite. Any failure at these breakpoints triggers rejection by the slop-test runner, preventing deployment until resolved.

## Preventing Horizontal Overflow

Horizontal scrolling is strictly prohibited. The system requires `overflow-x: clip` applied to both the `html` and `body` elements, defined in [`skills/hallmark/references/layout-and-space.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/layout-and-space.md) and [`responsive.md`](https://github.com/Nutlope/hallmark/blob/main/responsive.md) (line 12).

Using `overflow-x: hidden` is explicitly prohibited because it interferes with `position: sticky` and fixed positioning contexts. This requirement is enforced by **gate 34** in the slop-test specification.

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

```

## Grid and Image Constraints

Image-bearing grid tracks must use `minmax(0, 1fr)` for fractional tracks rather than plain `1fr`. As noted in [`responsive.md`](https://github.com/Nutlope/hallmark/blob/main/responsive.md) (line 11), standard `1fr` forces tracks to expand to the intrinsic image width, breaking mobile layouts by preventing proper shrinkage.

```css
.grid {
  grid-template-columns: repeat(auto-fill, minmax(0, 1fr));
}

```

## Typography and Interaction Rules

### Single-Line Affordances

All clickable elements—including buttons, navigation links, footer links, tabs, breadcrumbs, and CTAs—must remain on a single line from 320px up to 1920px. This is enforced by **gate 49** in the slop-test specification.

The fix hierarchy documented in [`responsive.md`](https://github.com/Nutlope/hallmark/blob/main/responsive.md) (lines 59-71) follows this priority:
1. Shorten the label text
2. Apply `white-space: nowrap`
3. Hide low-priority items
4. Collapse navigation into a sheet

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

```

### Long-Word Handling

Display-size headings must handle ultra-long words gracefully. The specification requires `overflow-wrap: anywhere` combined with `min-width: 0` to allow words to break inside rather than overflow the viewport.

```css
h1,
.hero__display {
  overflow-wrap: anywhere;
  min-width: 0;
}

```

## Advanced Responsive Patterns

### Fluid Scaling Architecture

Hallmark mandates **continuous scaling** using CSS `clamp()` functions rather than discrete breakpoint jumps. Media queries are reserved only for discrete layout changes, as specified in [`responsive.md`](https://github.com/Nutlope/hallmark/blob/main/responsive.md) (lines 37-44).

### Pointer and Hover Detection

Interaction capabilities must be detected using capability-based media queries rather than width breakpoints. The standard pattern queries `@media (hover: hover) and (pointer: fine)` for fine-pointer devices, allowing appropriate styling for touch versus mouse contexts.

```css
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-2px); }
}

@media (pointer: coarse) {
  .btn { min-height: 48px; }
}

```

### Viewport-Unit Safety

Dynamic viewport units are required for mobile compatibility. The specification mandates using `dvh`, `svh`, or `lvh` for height calculations and explicitly prohibits `100vw` for full-width elements because it includes the scrollbar width. This is documented in [`responsive.md`](https://github.com/Nutlope/hallmark/blob/main/responsive.md) (lines 94-95).

```css
.full-height {
  height: 100dvh;   /* Respects mobile chrome */
}

```

### Safe-Area Insets

To accommodate iOS notches and Android navigation bars, pages must include the viewport-fit meta tag and apply `env(safe-area-inset-*)` padding. The required meta tag configuration is specified in [`responsive.md`](https://github.com/Nutlope/hallmark/blob/main/responsive.md) (lines 100-108).

```html
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

```

```css
body {
  padding-inline: max(1rem, env(safe-area-inset-left));
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

```

### Radio Tab Patterns

Radio-tab implementations must prevent scroll-jumping on mobile taps. Radios should remain in the normal flow using zero sizing and opacity, or focus management must guard against automatic scrolling using `focus({preventScroll:true})`.

## Automated Enforcement via Slop-Tests

These requirements are not merely guidelines—they are **hard-floor validations** enforced by the slop-test runner. Specific gates defined in [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md) include:

- **Gate 34**: Validates no horizontal scroll (`overflow-x: clip` implementation)
- **Gate 49**: Validates single-line clickable text
- **Gates 50-57**: Cover mobile-specific pattern compliance
- **Gate 68**: Additional viewport safety checks

Any failure in these gates causes immediate rejection of the build output. Fixes must be applied before the code can be shipped, ensuring consistent mobile quality across all Hallmark implementations.

## Summary

- **Hallmark mandates support for 320px, 375px, 414px, and 768px viewports** as absolute requirements, not optional breakpoints.
- **Horizontal overflow is prevented using `overflow-x: clip`** on both `html` and `body` elements, never `hidden`.
- **Grid tracks containing images must use `minmax(0, 1fr)`** to prevent intrinsic width expansion.
- **All interactive affordances remain single-line** from mobile to wide desktop, enforced by a specific fix hierarchy and gate 49.
- **Automated slop-tests (gates 34, 49, 50-57, 68)** validate every requirement; failures block deployment.
- **Advanced patterns** include `clamp()` for fluid scaling, dynamic viewport units (`dvh`), and capability-based media queries.

## Frequently Asked Questions

### What viewport widths must Hallmark projects support?

Hallmark requires all outputs to render flawlessly at **320px, 375px, 414px, and 768px** CSS-pixel widths. These represent the non-negotiable mobile breakpoints documented in [`skills/hallmark/references/responsive.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/responsive.md), covering devices from small smartphones through tablets.

### Why does Hallmark prohibit `overflow-x: hidden` in favor of `clip`?

The `hidden` value interferes with `position: sticky` and fixed positioning contexts, causing unexpected layout behavior on mobile devices. The `clip` value provides the same overflow containment without affecting positioned elements, as specified in [`responsive.md`](https://github.com/Nutlope/hallmark/blob/main/responsive.md) (line 12) and [`layout-and-space.md`](https://github.com/Nutlope/hallmark/blob/main/layout-and-space.md).

### How are long words in large headings handled on mobile?

Display headings must include `overflow-wrap: anywhere` and `min-width: 0` to allow ultra-long words to break internally rather than overflowing the viewport. This prevents layout breaks when content exceeds the available horizontal space at narrow mobile viewports.

### What happens if a component fails the mobile responsiveness gates?

The slop-test runner automatically **rejects any build** that fails gates 34, 49, or 50-57. These failures block deployment and must be resolved before shipping. The automated enforcement ensures that no horizontal scroll, wrapped affordances, or broken mobile patterns reach production.