CodePen Embed - Container Queries: Responsive Design Beyond the Viewport

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Container Queries</title>
  </head>
  <body>
    <div class="drinks">
      <header>
        <h1>Welcome to my Soft Drink Catalog</h1>
        <p>
          See some little information about any soft drink that you might love.
        </p>
      </header>
      <main class="drinks-grid">
        <!-- SOFT DRINK CARD COMPONENT -->
        <div class="drink-card-container">
          <div class="drink-card">
            <img src="https://felixfavour.github.io/container-queries/images/coke.png" alt="" />
            <div class="info">
              <h3>Coke</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero
                voluptates quaerat excepturi laudantium
              </p>
              <h5>₦ 150 <sup>estimated RRP</sup></h5>
              <a href="#">See Official Website</a>
            </div>
          </div>
        </div>
        <div class="drink-card-container">
          <div class="drink-card">
            <img src="https://felixfavour.github.io/container-queries/images/fanta.png" alt="" />
            <div class="info">
              <h3>Fanta</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero
                voluptates quaerat excepturi laudantium
              </p>
              <h5>₦ 150 <sup>estimated RRP</sup></h5>
              <a href="#">See Official Website</a>
            </div>
          </div>
        </div>
        <div class="drink-card-container">
          <div class="drink-card">
            <img src="https://felixfavour.github.io/container-queries/images/sprite.png" alt="" />
            <div class="info">
              <h3>Sprite</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero
                voluptates quaerat excepturi laudantium
              </p>
              <h5>₦ 150 <sup>estimated RRP</sup></h5>
              <a href="#">See Official Website</a>
            </div>
          </div>
        </div>
        <div class="drink-card-container">
          <div class="drink-card">
            <img src="https://felixfavour.github.io/container-queries/images/pepsi.png" alt="" />
            <div class="info">
              <h3>Pepsi</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero
                voluptates quaerat excepturi laudantium
              </p>
              <h5>₦ 150 <sup>estimated RRP</sup></h5>
              <a href="#">See Official Website</a>
            </div>
          </div>
        </div>
        <div class="drink-card-container">
          <div class="drink-card">
            <img src="https://felixfavour.github.io/container-queries/images/mirinda.png" alt="" />
            <div class="info">
              <h3>Mirinda</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero
                voluptates quaerat excepturi laudantium
              </p>
              <h5>₦ 150 <sup>estimated RRP</sup></h5>
              <a href="#">See Official Website</a>
            </div>
          </div>
        </div>
        <div class="drink-card-container">
          <div class="drink-card">
            <img src="https://felixfavour.github.io/container-queries/images/7up.png" alt="" />
            <div class="info">
              <h3>7Up</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero
                voluptates quaerat excepturi laudantium
              </p>
              <h5>₦ 150 <sup>estimated RRP</sup></h5>
              <a href="#">See Official Website</a>
            </div>
          </div>
        </div>
      </main>
    </div>
  </body>
</html>

.drinks {
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 5%;
  font-family: Arial, Helvetica, sans-serif;
}
header {
  margin: 5% 0;
}
header * {
  margin: 0;
}
h1 {
  margin-bottom: 0.4rem;
}
.drinks-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.drink-card-container {
  margin-bottom: 2rem;
  border: 1px solid #cecece;
  container-type: inline-size;
}
.drink-card-container .drink-card {
  display: flex;
  gap: 1rem;
  padding: 1rem;
}
.drink-card-container img {
  width: 50%;
  height: 250px;
  object-fit: cover;
}
.drink-card-container .info {
  width: 50%;
  container-type: inline-size;
  container-name: drink-info;
  /* 
  SHORTHAND PROPERTY
  container: drink-card inline-size
  */
}
h3 {
  margin-top: 1rem;
}
h5 {
  font-size: 1.3rem;
  margin: 0;
}
a {
  width: 100%;
  background: black;
  height: 50px;
  font-size: 1.2rem;
  display: grid;
  place-items: center;
  color: white;
  text-decoration: none;
  margin-top: 1.5rem;
}

/* Container Queries */
@container (max-width: 450px) {
  .drink-card-container .drink-card {
    flex-direction: column;
  }
  .drink-card-container img {
    width: 100%;
  }
  .drink-card-container .info {
    width: 100%;
  }
}
@container (max-width: 300px) {
  .drink-card-container .drink-card {
    padding: 0.5rem;
  }
  sup {
    display: none;
  }
  a {
    font-size: 0.85rem;
  }
}
@container drink-info (max-width: 200px) {
  .info p {
    display: none;
  }
}

Run Pen

This Pen is owned by Favour Felix Chinemerem on CodePen.

See more by @felixfavour on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.