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

> Learn the 4 essential Hallmark mobile viewport widths 320px 375px 414px 768px required for all designs. Master mobile first development with our guide.

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

---

**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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/responsive.md)** — Documents the four mobile breakpoints and their associated non-negotiable rules
- **[`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/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:

```css
/* 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`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/responsive.md) | Defines breakpoints and non-negotiable responsive rules |
| [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) | Mandates 320/375/414/768 px as hard floor requirements |
| [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css) | Contains canonical breakpoint token definitions |
| `site/examples/*/styles.css` | Production implementations (e.g., [`site/examples/tally/styles.css`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/SKILL.md) and [`references/responsive.md`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/SKILL.md) line 54, such output violates the hard floor requirement and is non-compliant. The non-negotiable rules in [`responsive.md`](https://github.com/Nutlope/hallmark/blob/main/responsive.md) specify mandatory behaviors at each breakpoint: no horizontal scroll, proper overflow handling, and correct single-line element display.