CODEWITHSUNDEEP
htmlcssweb
Quic Flicks
Quic Flicks

Reputation: 41

Why I'm not able to see my cards as flex or grid layout?

I actaually made cards for my team members, and the cards went well but the layout is problematic. I tried with both CSS Flexbox and CSS3 Grid, my browser supports both of them but though I'm facing. And this works very well in mobile!!

I tried flex: 2 0 100%;

and also display: grid; grid-template-columns: repeat(470px, 1fr); grid-auto-rows: auto; grid-gap: 1em;

Is there any solution for this problem?

.cards2 {
    font-size: 11px;
    width: 100%;
    height: auto;
    padding: 1em 0;
}

.cards2 a { text-decoration: none; }

.cards2 .container {
    display: grid;
    grid-template-columns: repeat(470px, 1fr);
    grid-auto-rows: auto;
    grid-gap: 1em;
}

.cards2 .container .card-wrapper {
    margin: 25px;
}

.cards2 .container .card-wrapper .card {
    width:/* 32rem*/ 470px;
    margin: 34px 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #EBEEF8;
    box-shadow: 0.5rem 0.5rem 3rem rgba(0, 0, 0, 0.2);
    /* box-shadow:  20px 20px 60px #bec3c9, 
             -20px -20px 60px #ffffff; */
    border-radius: 28px;
}

.cards2 .container .card-wrapper .card .card-bg {
    width: 100%;
    height: 26rem;
    object-fit: cover;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 78%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 78%, 0% 100%);
    border-top-right-radius: 28px;
    border-top-left-radius: 28px; 
}

.cards2 .container .card-wrapper .card .card-logo {
    width: 14rem;
    height: 14rem;
    object-fit: cover;
    border-radius: 50%;
    margin-top: -170px;
    z-index: 999;
    border: 12px solid #EBEEF8;
}

.cards2 .container .card-wrapper .card h1 {
    font-size: 40px;
    font-family: 'Poppins', sans-serif;
    color: #333;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    margin: 25px 15px;
}

.cards2 .container .card-wrapper .card .title {
    color: #777;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1.1rem;
    text-align: center;
}

.cards2 .container .card-wrapper .card .desc {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    word-spacing: 0.8px;
    font-size: 1.3rem;
    text-align: center;
    font-style: italic;
    margin: 20px 0;
    padding: 8px;
}

.cards2 .container .card-wrapper .card .rb {
    background: #666;
    color: var(--light);
    padding: 10px;
    margin: 3px;
    border-radius: 50%;
}

.cards2 .container .card-wrapper .card .rb i {
    font-size: 16px;
}

.cards2 .container .card-wrapper .card .rb:hover {
    background: #555;
}

.cards2 .container .card-wrapper .card .social-icons {
    width: 100%;
    list-style: none;
    display: flex;
    justify-content: space-evenly;
    padding: 2rem 0;
    margin-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.cards2 .container .card-wrapper .card .social-icons h3 {
    font-size: 2.3rem;
}

.cards2 .container .card-wrapper .card .social-icons i {
    font-size: 2.8rem;
    color: #0596C2;
}

.cards2 .container .card-wrapper .card .social-icons i:hover {
    color: #50B4F2;
}
<div class="cards2">


    <div class="container">

      <div class="card-wrapper">


        <div class="card">
          <img src="images/authorSmaranBg.jpg" alt="Smaran Background" class="card-bg">
          <img src="images/authorSmaran.jpg" alt="Smaran Logo" class="card-logo">
          <h1>Smaran Bose B</h1>
          <p class="title">Author</p>
          <p class="desc">
            " Knowledge is everything to me. I love exploring. I don’t lose my control over patience. I like to keep a positive attitude. I am always ready to learn new skills and ready to face challenges. I don’t lose my cool so easily. I show my keen interest in music. My ultimate goal is to become a professional guitarist and a singer. I am also good at sports. I am good at playing cricket and badminton. "
          </p>
          <!-- <a href="#" class="rb"><i class="im im-warning"></i></a> -->
          <ul class="social-icons">
            <li><a href="https://www.instagram.com/smaranbose/"><i class="fab fa-instagram"></i></a></li>
            <li><a href="https://www.facebook.com/smaranbose.badugu.5"><i class="fab fa-facebook-square"></i></a></li>
          </ul>
        </div>

<div class="cards2">


    <div class="container">

      <div class="card-wrapper">


        <div class="card">
          <img src="images/authorSmaranBg.jpg" alt="Smaran Background" class="card-bg">
          <img src="images/authorSmaran.jpg" alt="Smaran Logo" class="card-logo">
          <h1>Smaran Bose B</h1>
          <p class="title">Author</p>
          <p class="desc">
            " Knowledge is everything to me. I love exploring. I don’t lose my control over patience. I like to keep a positive attitude. I am always ready to learn new skills and ready to face challenges. I don’t lose my cool so easily. I show my keen interest in music. My ultimate goal is to become a professional guitarist and a singer. I am also good at sports. I am good at playing cricket and badminton. "
          </p>
          <!-- <a href="#" class="rb"><i class="im im-warning"></i></a> -->
          <ul class="social-icons">
            <li><a href="https://www.instagram.com/smaranbose/"><i class="fab fa-instagram"></i></a></li>
            <li><a href="https://www.facebook.com/smaranbose.badugu.5"><i class="fab fa-facebook-square"></i></a></li>
          </ul>
        </div>

<div class="cards2">


    <div class="container">

      <div class="card-wrapper">


        <div class="card">
          <img src="images/authorSmaranBg.jpg" alt="Smaran Background" class="card-bg">
          <img src="images/authorSmaran.jpg" alt="Smaran Logo" class="card-logo">
          <h1>Smaran Bose B</h1>
          <p class="title">Author</p>
          <p class="desc">
            " Knowledge is everything to me. I love exploring. I don’t lose my control over patience. I like to keep a positive attitude. I am always ready to learn new skills and ready to face challenges. I don’t lose my cool so easily. I show my keen interest in music. My ultimate goal is to become a professional guitarist and a singer. I am also good at sports. I am good at playing cricket and badminton. "
          </p>
          <!-- <a href="#" class="rb"><i class="im im-warning"></i></a> -->
          <ul class="social-icons">
            <li><a href="https://www.instagram.com/smaranbose/"><i class="fab fa-instagram"></i></a></li>
            <li><a href="https://www.facebook.com/smaranbose.badugu.5"><i class="fab fa-facebook-square"></i></a></li>
          </ul>
        </div>

<div class="cards2">


    <div class="container">

      <div class="card-wrapper">


        <div class="card">
          <img src="images/authorSmaranBg.jpg" alt="Smaran Background" class="card-bg">
          <img src="images/authorSmaran.jpg" alt="Smaran Logo" class="card-logo">
          <h1>Smaran Bose B</h1>
          <p class="title">Author</p>
          <p class="desc">
            " Knowledge is everything to me. I love exploring. I don’t lose my control over patience. I like to keep a positive attitude. I am always ready to learn new skills and ready to face challenges. I don’t lose my cool so easily. I show my keen interest in music. My ultimate goal is to become a professional guitarist and a singer. I am also good at sports. I am good at playing cricket and badminton. "
          </p>
          <!-- <a href="#" class="rb"><i class="im im-warning"></i></a> -->
          <ul class="social-icons">
            <li><a href="https://www.instagram.com/smaranbose/"><i class="fab fa-instagram"></i></a></li>
            <li><a href="https://www.facebook.com/smaranbose.badugu.5"><i class="fab fa-facebook-square"></i></a></li>
          </ul>
        </div>
</div>
</div>
</div>

Upvotes: 0

Views: 95

Answers (1)

St3ph3n92
St3ph3n92

Reputation: 356

I think the problem here is the grid is set up incorrectly. There is no issue with using the grid and flexbox together. I see that you have made the container a grid but then have put the cards in individual containers as opposed to just one. This means that each card is in its own separate grid as opposed all the cards being in one grid.

Another issue was that you tried setting up the grid with two measurements: grid-template-columns: repeat(470px, 1fr);. 470px is a measurement but then 1fr is also a measurement, it stands for 1 fraction. Instead, the code should be grid-template-columns: repeat(4, 1fr);, assuming you want each card to take up 4 fractions of the available space before going onto a new line.

I have changed that one my CodePen here: https://codepen.io/St3ph3n92/pen/xxwraXE

If you want to learn more about the grid, I found this short crash course really helpful: https://scrimba.com/course/gR8PTE

.cards2 {
  font-size: 11px;
  width: 100%;
  height: auto;
  padding: 1em 0;
}

.cards2 a {
  text-decoration: none;
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  grid-gap: 1em;
}

.cards2 .container .card {
  width: /* 32rem*/
  470px;
  margin: 34px 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #EBEEF8;
  box-shadow: 0.5rem 0.5rem 3rem rgba(0, 0, 0, 0.2);
  border-radius: 28px;
}

.cards2 .container .card .card-bg {
  width: 100%;
  height: 26rem;
  object-fit: cover;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 78%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 78%, 0% 100%);
  border-top-right-radius: 28px;
  border-top-left-radius: 28px;
}

.cards2 .container .card .card-logo {
  width: 14rem;
  height: 14rem;
  object-fit: cover;
  border-radius: 50%;
  margin-top: -170px;
  z-index: 999;
  border: 12px solid #EBEEF8;
}

.cards2 .container .card h1 {
  font-size: 40px;
  font-family: 'Poppins', sans-serif;
  color: #333;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
  margin: 25px 15px;
}

.cards2 .container .card .title {
  color: #777;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.1rem;
  text-align: center;
}

.cards2 .container .card .desc {
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  word-spacing: 0.8px;
  font-size: 1.3rem;
  text-align: center;
  font-style: italic;
  margin: 20px 0;
  padding: 8px;
}

.cards2 .container .card .rb {
  background: #666;
  color: var(--light);
  padding: 10px;
  margin: 3px;
  border-radius: 50%;
}

.cards2 .container .card .rb i {
  font-size: 16px;
}

.cards2 .container .card .rb:hover {
  background: #555;
}

.cards2 .container .card .social-icons {
  width: 100%;
  list-style: none;
  display: flex;
  justify-content: space-evenly;
  padding: 2rem 0;
  margin-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.cards2 .container .card .social-icons h3 {
  font-size: 2.3rem;
}

.container .card .social-icons i {
  font-size: 2.8rem;
  color: #0596C2;
}

.cards2 .container .card .social-icons i:hover {
  color: #50B4F2;
}
<div class="cards2">


  <div class="container">
    <div class="card">
      <img src="images/authorSmaranBg.jpg" alt="Smaran Background" class="card-bg">
      <img src="images/authorSmaran.jpg" alt="Smaran Logo" class="card-logo">
      <h1>Smaran Bose B</h1>
      <p class="title">Author</p>
      <p class="desc">
        " Knowledge is everything to me. I love exploring. I don’t lose my control over patience. I like to keep a positive attitude. I am always ready to learn new skills and ready to face challenges. I don’t lose my cool so easily. I show my keen interest in
        music. My ultimate goal is to become a professional guitarist and a singer. I am also good at sports. I am good at playing cricket and badminton. "
      </p>
      <!-- <a href="#" class="rb"><i class="im im-warning"></i></a> -->
      <ul class="social-icons">
        <li><a href="https://www.instagram.com/smaranbose/"><i class="fab fa-instagram"></i></a></li>
        <li><a href="https://www.facebook.com/smaranbose.badugu.5"><i class="fab fa-facebook-square"></i></a></li>
      </ul>
    </div>

    <div class="card">
      <img src="images/authorSmaranBg.jpg" alt="Smaran Background" class="card-bg">
      <img src="images/authorSmaran.jpg" alt="Smaran Logo" class="card-logo">
      <h1>Smaran Bose B</h1>
      <p class="title">Author</p>
      <p class="desc">
        " Knowledge is everything to me. I love exploring. I don’t lose my control over patience. I like to keep a positive attitude. I am always ready to learn new skills and ready to face challenges. I don’t lose my cool so easily. I show my keen interest in
        music. My ultimate goal is to become a professional guitarist and a singer. I am also good at sports. I am good at playing cricket and badminton. "
      </p>

      <ul class="social-icons">
        <li><a href="https://www.instagram.com/smaranbose/"><i class="fab fa-instagram"></i></a></li>
        <li><a href="https://www.facebook.com/smaranbose.badugu.5"><i class="fab fa-facebook-square"></i></a></li>
      </ul>
    </div>

    <div class="card">
      <img src="images/authorSmaranBg.jpg" alt="Smaran Background" class="card-bg">
      <img src="images/authorSmaran.jpg" alt="Smaran Logo" class="card-logo">
      <h1>Smaran Bose B</h1>
      <p class="title">Author</p>
      <p class="desc">
        " Knowledge is everything to me. I love exploring. I don’t lose my control over patience. I like to keep a positive attitude. I am always ready to learn new skills and ready to face challenges. I don’t lose my cool so easily. I show my keen interest in
        music. My ultimate goal is to become a professional guitarist and a singer. I am also good at sports. I am good at playing cricket and badminton. "
      </p>
      <!-- <a href="#" class="rb"><i class="im im-warning"></i></a> -->
      <ul class="social-icons">
        <li><a href="https://www.instagram.com/smaranbose/"><i class="fab fa-instagram"></i></a></li>
        <li><a href="https://www.facebook.com/smaranbose.badugu.5"><i class="fab fa-facebook-square"></i></a></li>
      </ul>
    </div>

    <div class="card">
      <img src="images/authorSmaranBg.jpg" alt="Smaran Background" class="card-bg">
      <img src="images/authorSmaran.jpg" alt="Smaran Logo" class="card-logo">
      <h1>Smaran Bose B</h1>
      <p class="title">Author</p>
      <p class="desc">
        " Knowledge is everything to me. I love exploring. I don’t lose my control over patience. I like to keep a positive attitude. I am always ready to learn new skills and ready to face challenges. I don’t lose my cool so easily. I show my keen interest in
        music. My ultimate goal is to become a professional guitarist and a singer. I am also good at sports. I am good at playing cricket and badminton. "
      </p>
      <!-- <a href="#" class="rb"><i class="im im-warning"></i></a> -->
      <ul class="social-icons">
        <li><a href="https://www.instagram.com/smaranbose/"><i class="fab fa-instagram"></i></a></li>
        <li><a href="https://www.facebook.com/smaranbose.badugu.5"><i class="fab fa-facebook-square"></i></a></li>
      </ul>
    </div>
  </div>

I hope this helps!

Upvotes: 2

Related Questions