Responsive Product Page with CSS Grid and Media Queries

This example uses CSS Grid and media queries to adjust the product layout at different screen widths. It also hides the advertisement on mobile and changes the page background in landscape orientation.

Complete example

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Responsive Products</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 24px;
      font-family: Arial, sans-serif;
      background: #fff;
    }

    .page {
      max-width: 1200px;
      margin: 0 auto;
    }

    .products {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 20px;
    }

    .card {
      padding: 16px;
      border: 1px solid #ddd;
      border-radius: 8px;
      background: #fff;
    }

    .card img {
      display: block;
      width: 100%;
      height: 160px;
      object-fit: cover;
      border-radius: 4px;
    }

    .advertisement {
      margin-top: 24px;
      padding: 20px;
      text-align: center;
      background: #f0f0f0;
    }

    /* Tablet: 601px to 1024px */
    @media (min-width: 601px) and (max-width: 1024px) {
      .products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    /* Mobile: 600px and below */
    @media (max-width: 600px) {
      body {
        padding: 16px;
      }

      .products {
        grid-template-columns: 1fr;
      }

      .advertisement {
        display: none;
      }
    }

    /* Apply this background when the device is in landscape orientation */
    @media (orientation: landscape) {
      body {
        background: lightgrey;
      }
    }
  </style>
</head>
<body>
  <main class='page'>
    <h1>Featured Products</h1>
    <section class='products' aria-label='Product list'>
      <article class='card'>
        <img src='https://via.placeholder.com/300x160' alt='Product 1'>
        <h2>Product One</h2>
        <p>$24.99</p>
      </article>
      <article class='card'>
        <img src='https://via.placeholder.com/300x160' alt='Product 2'>
        <h2>Product Two</h2>
        <p>$34.99</p>
      </article>
      <article class='card'>
        <img src='https://via.placeholder.com/300x160' alt='Product 3'>
        <h2>Product Three</h2>
        <p>$19.99</p>
      </article>
      <article class='card'>
        <img src='https://via.placeholder.com/300x160' alt='Product 4'>
        <h2>Product Four</h2>
        <p>$29.99</p>
      </article>
    </section>
    <aside class='advertisement'>Advertisement</aside>
  </main>
</body>
</html>

How the responsive rules work

1. Desktop: The base grid uses four equal columns, so screens wider than 1024px show four cards per row.
2. Tablet: The 601px–1024px media query changes the grid to two columns.
3. Mobile: At 600px or narrower, the grid becomes one column and the advertisement is hidden.
4. Landscape: The orientation query sets the body background to light grey whenever the device is in landscape mode.