The photo that spills off phones

Intermediate

🎫 Client ticket

On phones, the product photo spills off the right edge of the screen and the whole page scrolls sideways. On a desktop it looks completely fine, so the team can't see the problem.

🔧 Your fix

HTML CSS

👁 Live preview

Hint: A large image keeps its natural pixel width unless you tell it to shrink. Which declaration caps an image at the width of its container so it never overflows?

The fix:

.card {
  width: 100%;
  max-width: 320px;
}
img {
  max-width: 100%;
  height: auto;
}

·Images are capped to their container's width

✅ Fixed! Case closed.

You found the faulty line and corrected it — exactly what real debugging feels like.

Why it broke: By default an image renders at its full natural size, so a wide photo overflows narrow screens. The fix every developer uses is img { max-width: 100%; height: auto; } — the image shrinks to fit its container while keeping its proportions. You only see it on phones because that's where the container gets narrow.

← Previous case

The badge that won't centre

Next case →

The third card that keeps dropping