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

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 and the automated validation defined in 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, 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 and 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.

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 (line 11), standard 1fr forces tracks to expand to the intrinsic image width, breaking mobile layouts by preventing proper shrinkage.

.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 (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

.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.

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 (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.

@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 (lines 94-95).

.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 (lines 100-108).

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

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 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, 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 (line 12) and 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}