BeforeRigid card grid
Front-end practice / case 01
AI-assisted personal demoA responsive-layout repair for Stillform, a fictional home-organizing service. The exercise intentionally introduces a mobile overflow defect, then applies a focused CSS correction. No client project or commercial result is implied.
Browser checked. Chrome layout checks passed at 320, 375, 390, 768 and 1440px on 11 October 2026. The measurements below run again in your browser. Safari, Firefox and physical devices have not been tested.
Live HTML previews at the selected CSS viewport width, scaled to fit these panels. Scroll within a panel to inspect the page. Preview scaling does not change the page's CSS viewport.
The service grid kept three columns with a 220px minimum width on a narrow screen. Together with its gaps and page margins, those columns extended beyond the viewport. Later service cards were off-screen horizontally.
Replace the fixed minimum with shrinkable grid tracks, then switch to a single column at 640px and below. Keep every service card visible in normal document flow. No global overflow hiding is used.
/* Before */
.service-grid {
grid-template-columns: repeat(3, minmax(220px, 1fr));
}
/* After */
.service-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 640px) {
.service-grid { grid-template-columns: 1fr; }
}These checks run on the actual before/after HTML in 2400px-high iframe viewports. Results below are computed live, not pre-filled.
| Viewport | Before page width | After page width | After overflow | Result |
|---|
Comparing tablet and desktop element geometry…
Scope: document width, service-card boundaries, column count, internal link targets, and element geometry at 768px and 1440px. Browser checks do not establish compatibility with every browser or device. No conversion, speed, SEO, accessibility-conformance or client-result claims.
Suggested portfolio wording
A self-initiated, AI-assisted front-end practice demo using a fictional service landing page. This case demonstrates how a rigid CSS Grid can cause mobile horizontal overflow and shows a focused grid and breakpoint correction. Includes the before/after source and live layout checks at 320, 375, 390, 768 and 1440px. Chrome layout checks passed at 320, 375, 390, 768 and 1440px; other browsers and physical devices have not been tested. No real client, commercial outcome or backend functionality is represented.