Hallmark Mobile Viewport Widths: The 4 Required Breakpoints for Every Output

Hallmark outputs must support four standard mobile viewport widths: 320 px, 375 px, 414 px, and 768 px, with 320 px serving as the hard floor and base for all mobile-first designs.

The Hallmark design system enforces strict responsive requirements that every generated page must satisfy. These four widths represent the complete mobile and small-tablet spectrum, from the smallest phones to phablet-sized devices. Understanding these breakpoints is essential for anyone building or auditing Hallmark-compatible interfaces.

The Four Required Mobile Viewport Widths

Hallmark's core skill definition explicitly mandates support for these specific CSS pixel widths:

Width (CSS px)	Device Category	Source Reference
320 px	Smallest typical phone	First mobile breakpoint in responsive.md
375 px	iPhone 6/7/8 standard	Second mobile breakpoint
414 px	Large phones (iPhone 11 Pro Max)	Third mobile breakpoint
768 px	Small tablets / phablets	Upper-range mobile breakpoint

According to skills/hallmark/SKILL.md line 54, these four widths constitute the "hard floor" for every Hallmark emission. No Hallmark-generated output may fail to render correctly at any of these sizes.

Where These Requirements Originate

The breakpoint specifications are defined across two authoritative files in the repository:

• skills/hallmark/references/responsive.md — Documents the four mobile breakpoints and their associated non-negotiable rules
• skills/hallmark/SKILL.md — Declares the 320 px/375 px/414 px/768 px requirement as mandatory for all outputs

These files establish that Hallmark follows a mobile-first discipline: base styles target 320 px, with progressive enhancement via min-width media queries for larger viewports.

How Hallmark Implements Mobile-First Breakpoints

The CSS architecture uses min-width media queries scaling upward from the 320 px base. Below is the pattern found in Hallmark-generated stylesheets:

/* Base (mobile-first) styles — 320 px */
body {
  overflow-x: clip;               /* root overflow enforcement */
}

/* Mid-mobile — 375 px */
@media (min-width: 23.4375rem) { /* 375 / 16 */
  .nav__sheet-toggle { display: grid; }
}

/* Large-mobile — 414 px */
@media (min-width: 25.875rem) {  /* 414 / 16 */
  .nav__sheet-toggle { display: grid; }
}

/* Small tablet — 768 px */
@media (min-width: 48rem) {       /* 768 / 16 */
  .nav__rail { display: none; }   /* tablet navigation behavior */
}

Key implementation details from the source:

• Base rules apply at 320 px without media queries
• Rem-based calculations ensure consistency across user font-size preferences
• Non-negotiable constraints include overflow-x: clip, single-line affordances via white-space: nowrap, and zero horizontal scroll

Files Governing Mobile Viewport Compliance

File Path	Purpose
skills/hallmark/references/responsive.md	Defines breakpoints and non-negotiable responsive rules
skills/hallmark/SKILL.md	Mandates 320/375/414/768 px as hard floor requirements
site/css/tokens.css	Contains canonical breakpoint token definitions
site/examples/*/styles.css	Production implementations (e.g., site/examples/tally/styles.css with max-width rules respecting mobile constraints)

Summary

• Hallmark mobile viewport widths are fixed at 320 px, 375 px, 414 px, and 768 px — no exceptions permitted
• Mobile-first architecture means 320 px serves as the default, with enhancement for larger sizes
• Source of truth lives in SKILL.md and references/responsive.md within the skills/hallmark/ directory
• Implementation uses min-width media queries with rem-based values for accessibility compliance

Frequently Asked Questions

Does Hallmark support viewport widths smaller than 320 px?

No. Hallmark treats 320 px as the absolute minimum. The mobile-first base styles target this width, and no provision exists for devices with narrower viewports. This aligns with industry standards for the smallest production smartphones.

Why does Hallmark use 768 px instead of 720 px or 800 px for tablets?

The 768 px value corresponds to the CSS pixel width of common small tablets (including iPad mini in portrait orientation). This specific number appears in responsive.md as the designated "upper-range mobile breakpoint" where tablet-specific behaviors activate.

How are the breakpoint values calculated in rem units?

Hallmark divides each pixel width by 16 (assuming default browser font-size) for rem conversion: 375 px becomes 23.4375 rem, 414 px becomes 25.875 rem, and 768 px becomes 48 rem. This pattern appears throughout site/examples/*/styles.css files.

What happens if a Hallmark output fails at one of the required widths?

Per SKILL.md line 54, such output violates the hard floor requirement and is non-compliant. The non-negotiable rules in responsive.md specify mandatory behaviors at each breakpoint: no horizontal scroll, proper overflow handling, and correct single-line element display.

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