# How Hallmark Verifies Mobile Responsiveness at 320px, 375px, 414px, and 768px > Learn how Hallmark verifies mobile responsiveness at 320px, 375px, 414px, and 768px using CSS media queries and automated headless-browser screenshot testing for a flawless user experience. - Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark) - Tags: how-to-guide - Published: 2026-08-04 --- **Hallmark verifies mobile responsiveness using CSS media queries combined with automated headless-browser screenshot testing at four standard viewport widths.** Hallmark generates pure HTML + CSS pages that adapt to common mobile breakpoints through standard responsive techniques. The Hallmark project implements a comprehensive verification system that combines viewport meta tags, strategic media queries, and automated visual regression testing to ensure layouts work correctly across the full range of mobile devices. ## Viewport Configuration for Mobile Testing Every Hallmark-generated page includes a mandatory viewport declaration in the document head. This meta tag enables proper scaling and ensures media queries function correctly on mobile browsers. ```html ``` This declaration instructs browsers to match the layout viewport to the device's physical width, creating the foundation for all breakpoint-based styling. ## Responsive Breakpoints in Hallmark CSS Hallmark's examples define **four primary breakpoints** that correspond to real device categories. Each breakpoint uses `@media (max-width: …)` rules to progressively adapt layouts. ### 320px: Minimum Mobile Width The 320px breakpoint targets the smallest smartphones in active use. Hallmark enforces tight constraints at this width to ensure content remains readable. Key implementation in [`site/examples/hum-07/styles.css`](https://github.com/Nutlope/hallmark/blob/main/site/examples/hum-07/styles.css): ```css /* Line 165 – card width limitation */ .remind { width: 100%; max-width: 320px; } ``` The **Hum-07** example explicitly caps card widths at 320px, preventing horizontal overflow on extremely narrow viewports. ### 375px: Standard Phone Width At 375px, Hallmark adjusts grid layouts to switch from multi-column to single-column arrangements. This breakpoint aligns with the iPhone SE and similar compact devices. Many theme CSS files include rules like: ```css @media (max-width: 375px) { .grid-item { grid-column: 1 / -1; } } ``` ### 414px: Large Phone Width The 414px breakpoint handles larger smartphones such as the iPhone Pro Max models. Hallmark treats this as an intermediate step where some multi-column layouts may persist but with reduced spacing. ### 768px: Tablet Portrait Width At 768px, Hallmark collapses navigation elements and finalizes the responsive transformation. The **Hum-07** example demonstrates this in [`site/examples/hum-07/styles.css`](https://github.com/Nutlope/hallmark/blob/main/site/examples/hum-07/styles.css) at line 120: ```css @media (max-width: 768px) { .nav--desktop { display: none; } } ``` This rule hides desktop navigation on tablets and smaller devices, typically revealing a mobile alternative. ## Adaptive Grid Implementation Hallmark uses **intrinsic CSS Grid** to handle column distribution without explicit breakpoint overrides. The **Hyperlane** example in [`site/examples/hyperlane/styles.css`](https://github.com/Nutlope/hallmark/blob/main/site/examples/hyperlane/styles.css) (line 666) implements: ```css .grid { display: grid; grid-template-columns: repeat( auto-fit, minmax(min(320px, 100%), 1fr) ); } ``` This pattern automatically reduces columns as viewport width decreases, respecting the 320px minimum without requiring discrete media queries for every layout permutation. ## Automated Visual Verification with `hallmark audit` Hallmark's verification system extends beyond static CSS to **runtime screenshot comparison**. The `hallmark audit` command executes a slop-test harness that validates responsive behavior across all four breakpoints. The test process: 1. Spins up a headless browser instance 2. Loads each generated HTML page 3. Sequentially sets viewport to **320px, 375px, 414px, and 768px** 4. Captures a screenshot at each size 5. Validates layout against expected CSS rule application Test failures trigger detailed reports identifying the specific breakpoint and offending CSS rule. The test suite resides in `site/_tests/` and integrates with the skill's audit pipeline as documented in [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md). ## Key Source Files in the Hallmark Repository | File Path | Responsibility | |-----------|---------------| | [`site/examples/hum-07/styles.css`](https://github.com/Nutlope/hallmark/blob/main/site/examples/hum-07/styles.css) | 320px card limits, 768px navigation hiding | | [`site/examples/wayfare/style.css`](https://github.com/Nutlope/hallmark/blob/main/site/examples/wayfare/style.css) | 480px media query implementation (line 1139) | | [`site/examples/hyperlane/styles.css`](https://github.com/Nutlope/hallmark/blob/main/site/examples/hyperlane/styles.css) | Auto-fit grid with 320px minimum | | `site/_tests/` | Headless browser screenshot verification | | [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) | Audit command documentation | ## Summary - **Viewport meta tag**: Every page includes `width=device-width, initial-scale=1` to enable responsive scaling - **Four breakpoints**: 320px, 375px, 414px, and 768px cover the full mobile-to-tablet range - **CSS Grid with `minmax()`**: Intrinsic layouts reduce manual breakpoint management - **`hallmark audit`**: Automated screenshot comparison catches regressions at each viewport width ## Frequently Asked Questions ### What viewport widths does Hallmark test for mobile responsiveness? Hallmark tests at **320px, 375px, 414px, and 768px**. These widths correspond to small phones, standard phones, large phones, and tablet portrait orientations respectively. The test harness in `site/_tests/` captures screenshots at each width during the audit process. ### How does Hallmark handle the smallest phone screens at 320px? Hallmark enforces hard width limits using `max-width: 320px` declarations and CSS Grid `minmax()` functions with 320px minimums. The **Hum-07** example in [`site/examples/hum-07/styles.css`](https://github.com/Nutlope/hallmark/blob/main/site/examples/hum-07/styles.css) demonstrates this with explicit card width constraints at the 320px breakpoint. ### Where does Hallmark define its responsive breakpoints? Breakpoints are distributed across example-specific stylesheets. The **Wayfare** example contains the 480px media query at line 1139 of [`site/examples/wayfare/style.css`](https://github.com/Nutlope/hallmark/blob/main/site/examples/wayfare/style.css), while **Hum-07** implements 320px and 768px rules. No central breakpoint file exists—each example manages its own responsive behavior. ### Can I run Hallmark's mobile responsiveness tests manually? Yes. Execute `hallmark audit` to trigger the full test suite including responsive screenshot verification. The command runs headless browser instances, cycles through the four viewport widths, and reports any layout deviations against expected CSS rules.