max-width keeps the card readable. This playground is already a small pane.

Goal

A card that does not stretch full width.

Paste into the HTML pane:

<article class="card">
  <h1>Kisumu kiosk</h1>
  <p>Five units today.</p>
</article>

Paste into the CSS pane:

.card {
  max-width: 280px;
  padding: 16px;
  border: 1px solid #ccc;
}
body { padding: 12px; }

.card h1 { font-size: 1.2rem; margin: 0 0 8px; }

@media (max-width: 400px) { .card { max-width: 100%; } }