'how to show multiple cards in one column?

Hi i need help in the styling currently more than 1 cards unable to scroll down and once i put on mobile view the cards appeared as per the image. Is i'm doing the right way? My result i would like to appear onscroll to appear each cards. As per the snippet on run but in my case my html it doesn't work that way hence, i showing the image result as per below. Thank you

Appreciate any help here. ImageResult- now condition To appear like this

 @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap");
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
  }
  
  body {
    width: 100%;
    display: flex;
    padding:20px 10px 20px 10px;
    // align-items: center;
    justify-content: center;
    height: auto;
  }
  
  /* styles only if hover is available */
  @media (hover) {
    .card:hover {
      transform: scale(1.01);
    }
  
    .card:hover::after {
      backdrop-filter: blur(2px);
    }
  
    .card-content {
      transform: translateY(55%);
    }
  
    .card:hover .card-content {
      transform: translateY(0);
    }
  
    .s-icon:hover {
      background-color: rgb(var(--primary));
    }
  
    .s-icon:hover i {
      color: black;
    }

  }

  .card-wrap {
    // display: flex;
    column-gap: 16px;
  }
  
  .card {
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    color: #fff;
    padding: 18rem 0 0 0;
    overflow: hidden;
    transition: 500ms ease transform;
  }
  
  .card::after {
    transition: 500ms ease backdrop-filter;
    position: absolute;
    top: 0;
    content: "";
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
  }
  
  .card-content {
    position: relative;
    z-index: 2;
    padding: 10px;
    transition: 500ms ease transform;
  }
  
  .card-title {
    margin-bottom: 8px;
  }
  
  .card-sub-title {
    font-size: 14px;
    margin-bottom: 16px;
  }
  
  .socials {
    display: flex;
    column-gap: 8px;
    margin-bottom: 16px;
  }
  
  .s-icon {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    width: 37px;
    height: 37px;
    border-radius: 50%;
    transition: 300ms ease all;
  }

  .sub {
    font-size: 10px;
    padding: 90px;
    color: red;
  }
  
  .s-icon i {
    font-size: 20px;
    color: rgb(var(--primary));
    transition: 300ms ease all;
  }
  
  .card-btn {
    display: inline-block;
    transition: 0.2s ease background-color;
    background-color: rgb(var(--primary));
    border: none;
    color: #fff;
    text-decoration: none;
    padding: 8px 16px;
    font-size: 12px;
    border-radius: 6px;
  }
  
  .card-btn:hover {
    background-color: rgba(var(--primary), 0.4);
  }

<body>
    <div class="card-wrap">
      <div class="row">
        <div class="card" style="background-image: url(./assets/abc.jpg)">
          <div class="card-content">
            <h2 class="card-title">card1</h2>
            <p class="card-sub-title">
              information
            </p>
            <div class="socials">
              <a class="s-icon">
                <i class="fab fa-twitter"></i>
                <p class="sub">twitter</p>
              </a>
              <a class="s-icon">
                <i class="fab fa-instagram"></i>
                <p class="sub">insta</p>
              </a>
              <a class="s-icon">
                <i class="fab fa-youtube"></i>
                <p class="sub">youtube</p>
              </a>
            </div>
            <a class="card-btn" href="">Learn More</a>
          </div>
        </div>
        <br>
        <div class="card" style="background-image: url(./assets/abc.jpeg)">
          <div class="card-content">
            <h2 class="card-title">card1</h2>
            <p class="card-sub-title">
              information
            </p>
            <div class="socials">
              <a class="s-icon">
                <i class="fab fa-twitter"></i>
                <p class="sub">twitter</p>
              </a>
              <a class="s-icon">
                <i class="fab fa-instagram"></i>
                <p class="sub">insta</p>
              </a>
              <a class="s-icon">
                <i class="fab fa-youtube"></i>
                <p class="sub">youtube</p>
              </a>
            </div>
            <a class="card-btn" href="">Learn More</a>
          </div>
        </div>
        <br>
        <div class="card" style="background-image: url(./assets/abc.jpeg)">
          <div class="card-content">
            <h2 class="card-title">card1</h2>
            <p class="card-sub-title">
              information
            </p>
            <div class="socials">
              <a class="s-icon">
                <i class="fab fa-twitter"></i>
                <p class="sub">twitter</p>
              </a>
              <a class="s-icon">
                <i class="fab fa-instagram"></i>
                <p class="sub">insta</p>
              </a>
              <a class="s-icon">
                <i class="fab fa-youtube"></i>
                <p class="sub">youtube</p>
              </a>
            </div>
            <a class="card-btn" href="">Learn More</a>
          </div>
        </div>
     </div>
    </div>
  </body>

html css

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'how to show multiple cards in one column?

Sources

Related Questions