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

> Discover Hallmark's mobile responsiveness rules and verified screen sizes. Learn their non-negotiable CSS standards including 320px, 375px, 414px, and 768px for optimal web design.

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

---

**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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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:

```css
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:

```css
.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:

```css
.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:

```css
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:

```javascript
// 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`:

```css
/* 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:

```css
/* 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`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/responsive.md) | Defines verified widths and non-negotiable rules (L5–9) |
| Slop-test definitions | [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md) | Documents gates 34, 49, 50, 51, 52, 53 |
| Skill overview | [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/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.