Terms in this guide: Evaluation · Fixture · Verification
SKILL LAB / RECORDED PRACTICE
A controlled Gutenberg fixture shows why rendered markup matters when fixing responsive cards.
The symptom and the owning layer
The teaching page used three fixed 360px columns with 24px gaps. At a 390px viewport, the second card began at x=400 and the third at x=784. Both were outside the visible page. The theme’s clipping meant the page’s overall scroll width alone did not reveal the defect. Inspecting the actual card bounds did.
The owning rule was exercise-specific CSS. Gutenberg rendered an additional group inner container, so the grid needed to account for that wrapper. The correction stayed under the .ac-practice-cards selector; it did not modify the theme’s global content width or the text of the native blocks.
The focused correction
.ac-practice-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.ac-practice-cards>.wp-block-group__inner-container{display:contents}.ac-practice-cards .wp-block-group{margin:0;min-width:0;padding:24px;border:1px solid #ccd4df;background:white;border-radius:16px;overflow-wrap:anywhere}@media(max-width:780px){.ac-practice-cards{grid-template-columns:1fr}}
Recorded before and after
The corrected cards were each 358px wide at the 390px viewport, stacked vertically with their right edges at x=374. At 1440px, the three corrected columns were approximately 397px wide and stayed within the content container. All three link labels and destinations matched the original fixture.
Inspect the faulty fixture · Inspect the corrected fixture · View the screenshots and walkthrough
Reproduce the check
Use the WordPress layout download on a disposable site. Compare wide and narrow views, inspect the group wrappers, apply only the scoped CSS, and check card boundaries rather than relying solely on the document scroll width. Follow a link and inspect a neighboring page that uses the same theme.
Limits of this evaluation
The assistant manually followed the published layout-review procedure in the in-app browser on local WordPress with Kadence. The fixture is deliberately faulty teaching content, not a historical production screenshot. Two viewport sizes and one neighboring page were inspected. This is not a complete accessibility audit, cross-browser matrix, or automatic skill-invocation benchmark.
Use the skill and the exercise
Progress stays in this browser. No account needed.