What Mobile Breakpoints Does Hallmark Verify? A Complete Guide to Mobile-First Testing

Hallmark verifies mobile responsiveness at four specific viewport widths: 320px, 375px, 414px, and 768px, enforcing strict mobile-first requirements that prevent horizontal overflow and ensure readable single-line interactive elements.

Hallmark is an open-source project by Nutlope that enforces rigorous mobile-first verification for every generated page. Understanding exactly what mobile breakpoints Hallmark verifies helps developers build layouts that pass automated compliance checks while maintaining responsive design standards. The verification system targets specific pixel widths defined in the skill configuration, distinct from the content-driven breakpoints used for CSS layout decisions.

The Four Verified Mobile Breakpoints

According to skills/hallmark/SKILL.md, Hallmark automatically tests every emitted page at the following four non-negotiable viewport widths:

• 320px — Smallest common phone screen (e.g., iPhone 5/SE)
• 375px — Standard modern phone width (e.g., iPhone 6/7/8, most Android phones)
• 414px — Larger phone or small-tablet width (e.g., iPhone Plus, iPhone XR)
• 768px — Tablet breakpoint (portrait iPad, Android tablets)

These widths represent the "mobile-responsiveness" gate that every Hallmark-generated page must pass before completion.

Verification Requirements

At each of the four breakpoints, Hallmark ensures three critical behaviors:

• No horizontal overflow — enforced via overflow-x: clip on both html and body elements
• Readable single-line elements — all interactive components must remain on a single line with legible text
• Proper layout collapse — multi-column grids must collapse to single-column arrangements

The requirements are documented in skills/hallmark/references/slop-test.md, which defines the hard-floor mobile tests that run automatically during the emit phase.

Content-Driven Breakpoints vs. Verification Widths

While Hallmark verifies at fixed pixel widths, the repository recommends content-driven breakpoints using rem units for actual CSS implementation. These are defined in skills/hallmark/references/responsive.md:

/* Content-driven breakpoints for layout decisions */
@media (min-width: 40rem) { /* ~640px – tablet / small laptop */ }
@media (min-width: 60rem) { /* ~960px – desktop baseline */ }
@media (min-width: 90rem) { /* ~1440px – wide screens */ }

The verification step uses the four fixed pixel widths (320px-768px) as mandatory compliance checks, while the rem-based breakpoints guide aesthetic layout decisions. This distinction ensures mobile compatibility regardless of base font size settings.

Implementation in the Codebase

Hallmark's mobile breakpoint discipline appears across multiple files in the Nutlope/hallmark repository.

Skill Definition

The primary definition in skills/hallmark/SKILL.md declares the four verification widths as the core mobile-responsiveness check.

Archetype Testing

Per site/_tests/README.md, each site archetype documents specific mobile breakpoint discipline, ensuring components behave correctly at the verified widths during automated testing.

CSS Implementation

Actual collapse rules appear in site/css/sections.css, showing how layouts transition at content-driven breakpoints:

@media (max-width: 40rem) {
  .grid {
    grid-template-columns: 1fr;   /* collapse to single column on mobile */
  }
}

Testing Against Hallmark's Breakpoints

To ensure compliance with Hallmark's verification, implement media queries that account for each required width:

/* Verify layout at each required mobile width */
@media (max-width: 320px) { /* smallest phone adaptations */ }
@media (max-width: 375px) { /* standard phone adaptations */ }
@media (max-width: 414px) { /* larger phone adaptations */ }
@media (max-width: 768px) { /* tablet portrait adaptations */ }

The internal testing approach iterates these widths programmatically:

const testWidths = [320, 375, 414, 768];
testWidths.forEach(w => {
  const viewport = { width: w, height: 800 };
  // Render page in a headless browser at the given width
  // Assert no horizontal scrollbar appears
  // Assert interactive elements are single-line and readable
});

Summary

• Hallmark verifies four fixed mobile breakpoints: 320px, 375px, 414px, and 768px as defined in skills/hallmark/SKILL.md.
• Verification occurs automatically at the emit phase for every generated page.
• Fixed pixel widths enforce minimum mobile compatibility constraints, while content-driven rem breakpoints (40rem, 60rem, 90rem) in skills/hallmark/references/responsive.md guide flexible CSS layouts.
• All verified layouts must prevent horizontal overflow via overflow-x: clip and maintain readable single-line interactive elements.
• Reference implementations exist in site/css/sections.css and testing documentation in site/_tests/README.md.

Frequently Asked Questions

Does Hallmark verify desktop breakpoints?

Hallmark's automated verification focuses specifically on mobile breakpoints (320px-768px) to ensure baseline mobile compatibility. While the repository includes content-driven breakpoints for larger screens (40rem, 60rem, 90rem) in skills/hallmark/references/responsive.md, the mandatory "mobile-responsiveness" check only applies to the four mobile viewport widths.

What happens if content overflows at 320px?

If horizontal overflow occurs at any verified breakpoint, the Hallmark check fails. The skills/hallmark/references/slop-test.md file mandates overflow-x: clip on both html and body elements, requiring layouts to properly reflow or scale content to fit within the narrowest 320px constraint without triggering horizontal scrollbars.

Can I modify the verification breakpoints?

The four verification widths are hard-coded in the Hallmark skill definition and serve as non-negotiable compliance criteria. Developers cannot modify these thresholds without altering the core skill configuration in skills/hallmark/SKILL.md, though they may implement additional custom breakpoints for enhanced responsive behavior beyond the minimum requirements.

How do I manually test against Hallmark's breakpoints?

Use browser DevTools to set precise viewport widths to 320px, 375px, 414px, and 768px. Verify that no horizontal scrollbars appear, text remains readable without zooming, and interactive elements maintain single-line formatting. Reference site/css/sections.css for examples of proper collapse patterns that satisfy the verification requirements.

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