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

Html – How to make my cards remain in the same proportions?

I have cards in row, but they do not maintain their proportions, so buttons can pop out of the card, and the card changes width/height. I understand that it’s because I’m using fixed width and height together with flex. I just couldn’t figure what’s the best way to make the cards look "the same" on any screen size using good practices.

What I want is to be able to design the cards on some screen size, and then know that when the screen will change, it will look the same. In this case, I want my cards to look the way they look when running the snippet in full screen (And if needed, break line)

This is the code for my current cards:

#cards {
  display: flex;
  justify-content: center;
  gap: 3%;
  margin: 0 auto 10vw auto;
  width: 75%;
}

.card {
  display: flex;
  flex-direction: column;
  padding: 1rem 2rem 3rem 2rem;
  width: 18rem;
  height: 16rem;
  align-items: center;
  justify-content: space-between;
  border-radius: 2vh;
  background-color: #00BFFF;
  border: none;
}

.card .content {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
}

.card .button {
  width: 100%;
  border-radius: 2vh;
  text-decoration: none;
  border: none;
  background-color: purple;
  color: white;
  font-weight: 700;
  padding: 1em 1.3em;
  text-align: center;
  cursor: pointer;
}
<div id="cards">
  <div class="card">
    <div class="content">
      <p>
        Hello, World
        <br />
        From Card #1
      </p>
    </div>
    <a class="button" href="#">Link Button</a>
  </div>
  <div class="card">
    <div class="content">
      <p>
        Hello, World
        <br />
        From Card #2
      </p>
    </div>
    <a class="button" href="#">Link Button</a>
  </div>
  <div class="card">
    <div class="content">
      <p>
        Hello, World
        <br />
        From Card #3
      </p>
    </div>
    <a class="button" href="#">Link Button</a>
  </div>
  <div class="card">
    <div class="content">
      <p>
        Hello, World
        <br />
        From Card #4
      </p>
    </div>
    <a class="button" href="#">Link Button</a>
  </div>
</div>
Tags:

2

Answers


  1. 0 
    #cards {
  display: flex;
  justify-content: center;
  gap: 3%;
  margin: 0 auto 10vw auto;
  max-width: 1200px; /* Set a maximum width for the cards */
  width: 100%; /* Allow the cards to take full width on smaller screens */
}

.card {
  display: flex;
  flex-direction: column;
  padding: 2vw; /* Use vw (viewport width) for padding */
  width: 22vw; /* Use vw for width */
  height: 20vw; /* Use vw for height */
  align-items: center;
  justify-content: space-between;
  border-radius: 2vh;
  background-color: #00BFFF;
  border: none;
}

.card .content {
  text-align: center;
  font-size: 2vw; /* Use vw for font size */
  font-weight: 700;
}

.card .button {
  width: 100%;
  border-radius: 2vh;
  text-decoration: none;
  border: none;
  background-color: purple;
  color: white;
  font-weight: 700;
  padding: 1.5vw 2vw; /* Use vw for padding */
  text-align: center;
  cursor: pointer;
}

    The dimensions and padding of the cards will be related to the width of the viewport by utilizing viewport units (vw), delivering a consistent look across different screen sizes. Change the settings to suit your design preferences.

    Login or Signup to reply.
  2. 0

    You can use the aspect-ratio property !
    This property works like for screen ratio (16:9, 4:3) where the first number is the width and the second one the height.

    Just calculate the width-height ratio and replace the height property.

    width : 15rem;
// height : 18rem;
aspect-ratio: 1/1.4;

    With this one little line, your card will keep the same proportions regardless of viewport dimensions.

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

Back To Top
Search