Observation Details
Text content gets truncated on small viewport with no possibility to reach the truncated content. This may affect:
product cards
text content
badges
interactive elements (footnotes) inside badges
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));
}
}