CODEWITHSUNDEEP
htmlcss
MajorAnonymous
MajorAnonymous

Reputation: 137

How can I make my flipable cards responsive? (CSS&HTML)

I have some flipable cards. I want that they align next to each other and when it doesn't fit it will go in a row under the other cards. I want 5 cards next to each, but to simplify it I have first 2 cards. Does anyone know how I can make them responsive? Must I do this with flex? If so, how? I think it's possible with flexbox.

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateX(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateX(180deg);
}
.flip-card2 {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner2 {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card2:hover .flip-card-inner2 {
  transform: rotateX(180deg);
}

.flip-card-front2, .flip-card-back2 {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front2 {
  background-color: #bbb;
  color: black;
}

.flip-card-back2 {
  background-color: #2980b9;
  color: white;
  transform: rotateX(180deg);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Card Flip with Text</h1>
<h3>Hover over the image below:</h3>

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div class="flip-card-back">
      <h1>John Doe</h1> 
      <p>Architect & Engineer</p> 
      <p>We love that guy</p>
    </div>
  </div>
</div>
<div class="flip-card2">
  <div class="flip-card-inner2">
    <div class="flip-card-front2">
      <img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div class="flip-card-back2">
      <h1>John Doe</h1> 
      <p>Architect & Engineer</p> 
      <p>We love that guy</p>
    </div>
  </div>
</div>
</body>
</html>

This is the picture I meant

Upvotes: 0

Views: 132

Answers (4)

Milan Sachani
Milan Sachani

Reputation: 355

Yes, You can also do it with flex as well. I have done it using display:grid which is really useful to use if you are having more than 4 boxes in columns. This is also fully responsive and will work on any device :)

You can use flex and it will solve the problem I guess but on a large screen, you may have only 4 boxes in columns.

    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;


 .text {
  text-align: center;
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
  gap: 10px;
  justify-items: center;
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
  padding: 10px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateX(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateX(180deg);
}
.flip-card2 {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner2 {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.flip-card2:hover .flip-card-inner2 {
  transform: rotateX(180deg);
}

.flip-card-front2,
.flip-card-back2 {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front2 {
  background-color: #bbb;
  color: black;
}

.flip-card-back2 {
  background-color: #2980b9;
  color: white;
  transform: rotateX(180deg);
}
<!DOCTYPE html>

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
     <div class="text">
    <h1>Card Flip with Text</h1>
    <h3>Hover over the image below:</h3>
    </div>
    <div class="cards">
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img
              src="https://www.w3schools.com/howto/img_avatar.png"
              alt="Avatar"
              style="width: 300px; height: 300px"
            />
          </div>
          <div class="flip-card-back">
            <h1>John Doe</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>

      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img
              src="https://www.w3schools.com/howto/img_avatar.png"
              alt="Avatar"
              style="width: 300px; height: 300px"
            />
          </div>
          <div class="flip-card-back">
            <h1>John Doe</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>

      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img
              src="https://www.w3schools.com/howto/img_avatar.png"
              alt="Avatar"
              style="width: 300px; height: 300px"
            />
          </div>
          <div class="flip-card-back">
            <h1>John Doe</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>

      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img
              src="https://www.w3schools.com/howto/img_avatar.png"
              alt="Avatar"
              style="width: 300px; height: 300px"
            />
          </div>
          <div class="flip-card-back">
            <h1>John Doe</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>

      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img
              src="https://www.w3schools.com/howto/img_avatar.png"
              alt="Avatar"
              style="width: 300px; height: 300px"
            />
          </div>
          <div class="flip-card-back">
            <h1>John Doe</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Upvotes: 1

rand_program
rand_program

Reputation: 1180

You can wrap all of your flip-cards in a container and apply flexBox on that container

.card-container{
  display: flex;
  flex-wrap: wrap;
}


body{
  min-height: 100vh;
  display: grid;
  place-content: center;
}

.card-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1100px;
  background-color: bisque;
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
  margin: 2rem;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateX(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateX(180deg);
}
.flip-card2 {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner2 {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card2:hover .flip-card-inner2 {
  transform: rotateX(180deg);
}

.flip-card-front2, .flip-card-back2 {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front2 {
  background-color: #bbb;
  color: black;
}

.flip-card-back2 {
  background-color: #2980b9;
  color: white;
  transform: rotateX(180deg);
}
<h1>Card Flip with Text</h1>
    <h3>Hover over the image below:</h3>
    <div class="card-container">
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img
              src="img_avatar.png"
              alt="Avatar"
              style="width: 300px; height: 300px"
            />
          </div>
          <div class="flip-card-back">
            <h1>John Doe</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img
              src="img_avatar.png"
              alt="Avatar"
              style="width: 300px; height: 300px"
            />
          </div>
          <div class="flip-card-back">
            <h1>John Doe</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img
              src="img_avatar.png"
              alt="Avatar"
              style="width: 300px; height: 300px"
            />
          </div>
          <div class="flip-card-back">
            <h1>John Doe</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img
              src="img_avatar.png"
              alt="Avatar"
              style="width: 300px; height: 300px"
            />
          </div>
          <div class="flip-card-back">
            <h1>John Doe</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>
      <div class="flip-card flip-card2">
        <div class="flip-card-inner2">
          <div class="flip-card-front2">
            <img
              src="img_avatar.png"
              alt="Avatar"
              style="width: 300px; height: 300px"
            />
          </div>
          <div class="flip-card-back2">
            <h1>John Doe</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>
    </div>

Upvotes: 1

pshyduc
pshyduc

Reputation: 13

As the answer above. I think you should have have some custom Css with break points too. In that case your card will not change the width size value, only go one line down See example below:

@media (max-width: 800px) {
  #pricing {
    flex-direction: column;
  }
  .product {
    max-width: 300px;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 10px;
  }
}

Upvotes: 0

B&#225;lint Cs&#233;falvay
B&#225;lint Cs&#233;falvay

Reputation: 377

Only thing you need to change is the width and height of the cards. You need to add some relative values. (I marked the lines where you need to change the values)

.flip-card {
  background-color: transparent;
  width: 25vw; //change here
  height: 25vw; //change here
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateX(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateX(180deg);
}
.flip-card2 {
  background-color: transparent;
  width: 25vw; //change here
  height: 25vw; //change here
  perspective: 1000px;
}

.flip-card-inner2 {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card2:hover .flip-card-inner2 {
  transform: rotateX(180deg);
}

.flip-card-front2, .flip-card-back2 {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front2 {
  background-color: #bbb;
  color: black;
}

.flip-card-back2 {
  background-color: #2980b9;
  color: white;
  transform: rotateX(180deg);
}

Upvotes: 0

Related Questions