Sample delivery

Responsive Card Bug

Problem: a three-card grid overflowed on phones because the layout never collapsed below 960px. Fix: add a mobile breakpoint and preserve desktop layout.

Send Bug Back

Patch

Minimal CSS Change

Only the grid behavior changed. Card styling and desktop spacing stayed untouched.

@@ styles.css
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

@media (max-width: 720px) {
  .cards {
    grid-template-columns: 1fr;
  }
}
01

Repro

Opened the page at 390px width and confirmed cards overflowed horizontally.

02

Fix

Added a single breakpoint that stacks cards on narrow screens.

03

Check

Retested at 390px and 1440px. Mobile stacks, desktop remains three columns.