Observation Details
Testing for WCAG 1.4.10 with viewport set to 320×256px and page zoom set to 100%.
The "content cards" are grouped in rows which overflow the viewport and require two-dimensional scrolling. Content must reflow on smaller viewports to not require two-dimensional scrolling.
Remediation Notes
Ensure proper reflow of content on smaller viewports. Ideally, content reflows responsively based on available space. This can be achieved by a setup like this:
.grid {
--min-item-width: 200px;
--grid-gap: 1rem;
display: grid;
grid-gap: var(--grid-gap);
}
@supports (width: min(var(--min-item-width), 100%)) {
.grid {
grid-template-columns: repeat(auto-fit, minmax(min(var(--min-item-width), 100%), 1fr));
}
}Note: remediating this issue, please be aware of changes to the "content cards" in other observations as well. Please refer to observation "Content card link purpose not determinable" (2.4.4 Link Purpose (In Context)) for more information.