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

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 >
  <div >
    <div >
      <img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div >
      <h1>John Doe</h1> 
      <p>Architect & Engineer</p> 
      <p>We love that guy</p>
    </div>
  </div>
</div>
<div >
  <div >
    <div >
      <img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div >
      <h1>John Doe</h1> 
      <p>Architect & Engineer</p> 
      <p>We love that guy</p>
    </div>
  </div>
</div>
</body>
</html>

CodePudding user response：

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 devices :)

 .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 >
    <h1>Card Flip with Text</h1>
    <h3>Hover over the image below:</h3>
    </div>
    <div >
      <div >
        <div >
          <div >
            <img
              src="https://www.w3schools.com/howto/img_avatar.png"
              alt="Avatar"
              style="width: 300px; height: 300px"
            />
          </div>
          <div >
            <h1>John Doe</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>

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

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

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

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

CodePudding user response：

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 >
      <div >
        <div >
          <div >
            <img
              src="img_avatar.png"
              alt="Avatar"
              style="width: 300px; height: 300px"
            />
          </div>
          <div >
            <h1>John Doe</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>
      <div >
        <div >
          <div >
            <img
              src="img_avatar.png"
              alt="Avatar"
              style="width: 300px; height: 300px"
            />
          </div>
          <div >
            <h1>John Doe</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>
      <div >
        <div >
          <div >
            <img
              src="img_avatar.png"
              alt="Avatar"
              style="width: 300px; height: 300px"
            />
          </div>
          <div >
            <h1>John Doe</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>
      <div >
        <div >
          <div >
            <img
              src="img_avatar.png"
              alt="Avatar"
              style="width: 300px; height: 300px"
            />
          </div>
          <div >
            <h1>John Doe</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>
      <div >
        <div >
          <div >
            <img
              src="img_avatar.png"
              alt="Avatar"
              style="width: 300px; height: 300px"
            />
          </div>
          <div >
            <h1>John Doe</h1>
            <p>Architect & Engineer</p>
            <p>We love that guy</p>
          </div>
        </div>
      </div>
    </div>

CodePudding user response：

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);
}

CodePudding user response：

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;
  }
}