Question 404278 in Html Question posted in
Some basic documentation can be found here.

How can I make a card like this which is responsive in HTML/CSS

I would like to make a card (image 1) which is fully responsive and can support two cards sitting to the left of it for a total of three cards on a website I am building (image 2). I’ve coded this up without responsiveness but I am struggling to get a responsive card. Any help is great, thank you!

JSFiddle: https://jsfiddle.net/brax/2o01k7ps/

.alignment2 {
  display: flex;
  justify-content: space-between;
  column-gap: 20px;
  padding-bottom: 6%;
}

.container {
  padding: 2px 16px;
}

.card2 {
  box-shadow: 0 5px 13px 0 #000;
  border-radius: 15px;
  background-color: #121212;
  border-color: #121212;
  height: 188px;
}

.card2:hover {
  box-shadow: 0 8px 16px 0 000;
}

.card2 img {
  width: 50%;
  float: left;
  border-radius: 15px 0px 0px 15px;
  margin-right: 20px;
  display: inline;
}

.card2 h3 {
  display: inline;
}

.card2 h4 {
  display: inline;
  font-size: 24px;
  color: white;
}

.card2 p {
  display: inline;
  font-size: 18px;
  color: white;
  padding-top: 20px;
}

.card2 .link-a {
  display: inline;
  margin-top: 35px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}
<div class="alignment2">
  <div class="card2">
    <img src="https://dummyimage.com/300x300" alt="Avatar">
    <div class="container">
      <h4>Lorem Ipsum</h4>
      <br>
      <br>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor</p>
      <br>
      <br>
      <p class="link-a" style="font-size: 15px;"><a href="link">CTA Link</a></p>
    </div>
  </div>
  <div class="card2">
    <img src="https://dummyimage.com/300x300" alt="Avatar">
    <div class="container">
      <h4>Lorem Ipsum</h4>
      <br>
      <br>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor</p>
      <br>
      <br>
      <p class="link-a" style="font-size: 15px;"><a href="link">CTA Link</a></p>
    </div>
  </div>
</div>

Image 1

enter image description here

Image 2

enter image description here

Tags:

2

Answers


  1. 0

    To make it responsive, first replace width: 50% on img with height: 100%; so that the image is stretched vertically on the card.

    Then add flex-wrap: wrap; to the .alignment2 and replace column-gap with gap so that there is a gap between cards when they are displayed in rows.

    Also, add flex: 1 1 calc(33.333% - 20px); to .card2 so that they display side by side in a row with a little gap in between.

    Lastly, using "media queries", change the flex for smaller screens so that fewer cards are next to each other as the screen gets smaller.

    Here is the updated page (I added a third card):

    .alignment2 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding-bottom: 6%;
}

.container {
  padding: 2px 16px;
}

.card2 {
  flex: 1 1 calc(33.333% - 20px);
  /* Three cards per row */
  box-shadow: 0 5px 13px 0 #000;
  border-radius: 15px;
  background-color: #121212;
  border-color: #121212;
  height: 188px;
}

.card2:hover {
  box-shadow: 0 8px 16px 0 #000;
}

.card2 img {
  /*width: 50%;*/
  height: 100%;
  float: left;
  border-radius: 15px 0px 0px 15px;
  margin-right: 20px;
  display: inline;
}

.card2 h3 {
  display: inline;
}

.card2 h4 {
  display: inline;
  font-size: 24px;
  color: white;
}

.card2 p {
  display: inline;
  font-size: 18px;
  color: white;
  padding-top: 20px;
}

.card2 .link-a {
  display: inline;
  margin-top: 35px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}

@media screen and (max-width: 1200px) {
  .card2 {
    flex: 1 1 calc(50% - 20px);
    /* Two cards per row */
  }
}


/* Responsive design */

@media screen and (max-width: 900px) {
  .card2 {
    flex: 1 1 100%;
    /* One card per row */
  }
}
    <div class="alignment2">
  <div class="card2">
    <img src="https://dummyimage.com/300x300" alt="Avatar">
    <div class="container">
      <h4>Lorem Ipsum</h4>
      <br>
      <br>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor</p>
      <br>
      <br>
      <p class="link-a" style="font-size: 15px;"><a href="link">CTA Link</a></p>
    </div>
  </div>
  <div class="card2">
    <img src="https://dummyimage.com/300x300" alt="Avatar">
    <div class="container">
      <h4>Lorem Ipsum</h4>
      <br>
      <br>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor</p>
      <br>
      <br>
      <p class="link-a" style="font-size: 15px;"><a href="link">CTA Link</a></p>
    </div>
  </div>
  <div class="card2">
    <img src="https://dummyimage.com/300x300" alt="Avatar">
    <div class="container">
      <h4>Lorem Ipsum</h4>
      <br>
      <br>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor</p>
      <br>
      <br>
      <p class="link-a" style="font-size: 15px;"><a href="link">CTA Link</a></p>
    </div>
  </div>
</div>

    there was an error in .card2:hover too, change 000 to #000

    Login or Signup to reply.
  2. 0

    Since you already use flex, you may keep using it for the children layouts too.

    Here is a possible example you can play with.

    * {
box-sizing:border-box;
}
.alignment2 {
  display: flex;
  flex-wrap:wrap;
  justify-content: space-around;
  gap: 20px;
  padding-bottom: 6%;
}

.container {
  padding: 2px 16px;
  width:50%;
  display:flex;
  flex-direction:column;
  color:white;
}

.card2 {
  box-shadow: 0 5px 13px 0 #000;
  border-radius: 15px;
  background-color: #121212;
  border-color: #121212;
  display:flex;
  gap:20px;
  overflow:hidden;
}

.card2:hover {
  box-shadow: 0 8px 16px 0 000;
}

.card2 img {
  width: 50%;
  height:0;
  min-height:100%;
  object-fit:cover
}
.card2 h4 {
font-size: 1.5rem;
}
.card2 .link-a {

  margin-top: auto;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}
    <div class="alignment2">
  <div class="card2">
    <img src="https://dummyimage.com/300x300" alt="Avatar">
    <div class="container">
      <h4>Lorem Ipsum</h4>
      <br>
      <br>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor</p>
      <br>
      <br>
      <p class="link-a" style="font-size: 15px;"><a href="link">CTA Link</a></p>
    </div>
  </div>
  <div class="card2">
    <img src="https://dummyimage.com/300x300" alt="Avatar">
    <div class="container">
      <h4>Lorem Ipsum</h4>
      <br>
      <br>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor</p>
      <br>
      <br>
      <p class="link-a" style="font-size: 15px;"><a href="link">CTA Link</a></p>
    </div>
  </div>
  <div class="card2">
    <img src="https://dummyimage.com/300x300" alt="Avatar">
    <div class="container">
      <h4>Lorem Ipsum</h4>
      <br>
      <br>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor</p>
      <br>
      <br>
      <p class="link-a" style="font-size: 15px;"><a href="link">CTA Link</a></p>
    </div>
  </div>
</div>

    I believe you already know enough about flex to find your own way . Else here is a usefull link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search