How Hallmark Verifies Mobile Responsiveness at 320px, 375px, 414px, and 768px
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.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
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:
/* 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:
@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 at line 120:
@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 (line 666) implements:
.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:
- Spins up a headless browser instance
- Loads each generated HTML page
- Sequentially sets viewport to 320px, 375px, 414px, and 768px
- Captures a screenshot at each size
- 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.
Key Source Files in the Hallmark Repository
| File Path | Responsibility |
|---|---|
site/examples/hum-07/styles.css |
320px card limits, 768px navigation hiding |
site/examples/wayfare/style.css |
480px media query implementation (line 1139) |
site/examples/hyperlane/styles.css |
Auto-fit grid with 320px minimum |
site/_tests/ |
Headless browser screenshot verification |
skills/hallmark/SKILL.md |
Audit command documentation |
Summary
- Viewport meta tag: Every page includes
width=device-width, initial-scale=1to 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 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, 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.
Have a question about this repo?
These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:
curl -s "https://instagit.com/install.md" 
Maintain an open-source project? Get it listed too →