Hallmark Mobile Responsiveness: Non-Negotiable Rules and Verified Screen Sizes

Hallmark enforces a strict mobile-first approach with four verified CSS-pixel widths (320 px, 375 px, 414 px, and 768 px) and six non-negotiable CSS rules that prevent horizontal scroll, text wrapping on clickable elements, and layout breaks.

Hallmark's design system treats mobile responsiveness as a hard requirement, not a feature. Every generated page must pass automated slop-test gates at four specific viewport widths defined in skills/hallmark/references/responsive.md. This article breaks down the verified screen sizes, the non-negotiable rules, and the implementation details you need to build compliant Hallmark pages.

Verified Screen Sizes for Hallmark Mobile Responsiveness

Hallmark hard-codes four CSS-pixel widths as mandatory test points:

• 320 px — smallest baseline (legacy iPhone SE)
• 375 px — standard mobile (iPhone 6–14)
• 414 px — large mobile (iPhone Plus/Max)
• 768 px — tablet portrait (iPad mini/base)

These values appear at lines 5–9 of skills/hallmark/references/responsive.md and are enforced by automatic slop-test gates 34 and 49. Any page failing checks at any of these widths is flagged incomplete.

The Six Non-Negotiable Rules

Hallmark's responsive guidelines define strict constraints that must hold across all four verified viewports. Each rule maps to a specific slop-test gate.

No Horizontal Scroll (Gate 34)

The root elements must clip overflow horizontally:

html, body {
  overflow-x: clip;
}

This prevents any content from triggering scroll at narrow widths. The rule is absolute—no exceptions for tables, images, or third-party embeds.

Clickable Text Never Wraps (Gate 49)

Interactive elements maintain single-line presentation through forced nowrap and label shortening:

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

Long labels truncate or abbreviate rather than break to multiple lines, preserving tap target integrity.

Image Grids Stay Within Viewport (Gate 50)

Grid tracks containing images use minmax(0, 1fr) to prevent intrinsic sizing from pushing beyond container bounds:

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

The 0 minimum overrides default auto behavior that respects image natural widths.

Headers Break Safely (Gate 51)

Heading text wraps without causing overflow through explicit properties:

h1, h2, h3 {
  overflow-wrap: anywhere;
  min-width: 0;
}

min-width: 0 is required for flex and grid children where default auto minimums resist compression.

Section Heads Collapse to One Column on Mobile (Gate 52)

Multi-column section headers must stack vertically below the tablet threshold. This is structural—no CSS-only reflows that preserve side-by-side layout at narrow widths.

No Scroll-Jump on Tab Clicks (Gate 53)

Radio-button tabs and focusable elements avoid viewport jumps:

// Option 1: Keep radios in document flow
// Option 2: Programmatic focus with prevention
element.focus({ preventScroll: true });

Both patterns prevent the automatic scroll-into-view behavior that disrupts user position.

Mobile-First Implementation Principles

Hallmark's CSS architecture follows three core patterns defined in the responsive guidelines.

Minimum-Width Media Queries Only

Base styles target the smallest viewport. All adaptations use min-width, never max-width:

/* Base: 320 px and up */
.component { /* mobile styles */ }

@media (min-width: 40rem) {
  /* ~640 px — tablet adjustments */
}

@media (min-width: 60rem) {
  /* ~960 px — desktop baseline */
}

@media (min-width: 90rem) {
  /* ~1440 px — wide screens */
}

This ensures unsupported browsers receive the most constrained, safest layout.

Content-Driven Breakpoints

Breakpoints derive from where the design breaks, not device dimensions. The rem-based values above map approximately to content needs, not specific hardware.

Rem-Based Breakpoints Respect User Font Size

Using rem for media query values means breakpoints scale with the user's base font size preference. A user with font-size: 20px sees the "640 px" breakpoint trigger at 800 CSS pixels, maintaining readable line lengths.

Complete Responsive CSS Template

Combine all non-negotiable rules into a base stylesheet:

/* Gate 34: Prevent horizontal scroll */
html, body {
  overflow-x: clip;
}

/* Gate 49: Prevent clickable text wrapping */
.btn, .nav__link, .foot__link, .cta, .tab__label {
  white-space: nowrap;
}

/* Gate 50: Safe image grids */
.grid--images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 1rem;
}

/* Gate 51: Safe header wrapping */
h1, h2, h3, h4 {
  overflow-wrap: anywhere;
  min-width: 0;
}

/* Gate 52: Single-column section heads on mobile */
.section__header {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .section__header {
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: 1.5rem;
  }
}

/* Gate 53: Prevent scroll-jump on focus */
[role="tab"] {
  scroll-margin-top: 0;
}

/* Or with JS: element.focus({ preventScroll: true }) */

Key Source Files for Hallmark Mobile Responsiveness

File	Location	Purpose
Responsive guidelines	skills/hallmark/references/responsive.md	Defines verified widths and non-negotiable rules (L5–9)
Slop-test definitions	skills/hallmark/references/slop-test.md	Documents gates 34, 49, 50, 51, 52, 53
Skill overview	skills/hallmark/SKILL.md	High-level design system description

These files live in the hallmark skill directory and constitute the authoritative specification for responsive behavior.

Summary

Hallmark mobile responsiveness operates on a hard floor model: any page that fails one non-negotiable rule at one verified width is incomplete. Key takeaways:

• Four verified widths: 320 px, 375 px, 414 px, 768 px
• Six non-negotiable rules: no horizontal scroll, no wrapped clickable text, contained image grids, safe header breaks, single-column mobile headers, no scroll-jump on tabs
• Mobile-first architecture: base styles for narrowest width, min-width media queries only
• Automated enforcement: slop-test gates 34–53 check compliance
• Rem-based breakpoints: respect user font preferences and enable content-driven adaptation

Frequently Asked Questions

What happens if a Hallmark page fails a slop-test gate?

The page is flagged as incomplete and blocked from deployment. Gates 34 and 49 are strictly enforced—the automated suite treats any horizontal scroll or wrapped clickable text as a build failure.

Why does Hallmark use overflow-x: clip instead of hidden?

clip prevents programmatic scrolling via JavaScript methods like scrollTo(), providing stronger guarantees against accidental overflow exposure. Both visually hide content, but clip is the stricter, preferred choice for the non-negotiable rule.

How should I handle long button labels that don't fit at 320 px?

Truncate with CSS text-overflow: ellipsis or abbreviate the label text itself. The non-negotiable rule requires white-space: nowrap on all clickable text—you must shorten the content rather than allowing natural wrapping.

Are the verified widths device-specific breakpoints?

No. The four widths are test points, not breakpoints. Hallmark's actual CSS uses content-driven rem-based breakpoints (around 40 rem, 60 rem, 90 rem). The verified widths ensure the design holds at representative narrow, medium-narrow, large-mobile, and tablet portrait sizes regardless of where breakpoint boundaries fall.

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