Accompanying Files
Observation Details
Text content within product cards gets truncated on small viewport with no possibility to reach the content. This also affects product card badges and interactive elements (footnotes) inside them.
Remediation Notes
Ensure the site is responsive. A viewport of 320px width must keep all content visible and all functionality intact. For the product cards, use a responsive layout method like the following to ensure correct reflow:
.product-list {
--min-card-width: 200px;
--product-list-gap: 1rem;
display: grid;
grid-gap: var(--product-list-gap);
}
@supports (width: min(var(--min-card-width), 100%)) {
.product-list {
grid-template-columns: repeat(auto-fit, minmax(min(var(--min-card-width), 100%), 1fr));
}
}