QR code component

A centered card component displaying a QR code with a title and description beneath it. Simple on the surface — the real exercise is understanding centering and spacing fundamentals.

The Challenge

Build a card that sits centered on the page, both horizontally and vertically. The card contains a QR code image, a heading, and a short description. It should look clean at any viewport size.

Requirements:

• Card centered on page
• QR image fills the card width with rounded corners
• Consistent internal spacing
• Max width so the card doesn’t get too wide on large screens

What I Learned

There are many ways to center something in CSS. This was a good opportunity to practice the modern approach:

body {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

100dvh (dynamic viewport height) handles mobile browsers correctly — it accounts for the browser chrome that appears and disappears when scrolling, which 100vh does not.

Card Structure

.card {
  max-width: 320px;
  width: 100%;
  padding: 1rem;
  border-radius: 20px;
  background-color: hsl(0, 0%, 100%);
  box-shadow: 0 25px 25px hsl(212, 45%, 89%);
}

.card img {
  width: 100%;
  border-radius: 10px;
}

Why It Matters

Centering is a foundational skill that trips up beginners more than it should. The QR component is simple enough to focus entirely on the layout — no distractions from complex content or interaction.