HTML CSS Responsive cards

Jannes 0
Viewed 64

I have 3 cards in my page, which are laid out in a grid.

The other 2 items are the same, just with different icons and text.

Cards are supposed to have the following properties:

  1. Be Square shaped
  2. Have the icon top middle
  3. Have the cardHeadline centered below the icon
  4. Have the cardText centered below that
  5. Be responsive

After much fiddling, I achieved points 1 through 4 with the CSS below.

 .cardsWrapper {
    display: grid;
    gap: 1rem;

    margin-top: 1em;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.cardWhite {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: white;
    color: black;
    box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;

    width: 100%;
    border-radius: 10px;
    transition: all 500ms;
    overflow: hidden;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    height: 0;
    padding-top: 100%;
    position: relative;

}

.cardContent {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
}

.icon {
    height: 8vw;
    color: black;
}

.cardHeadline {
    font-family: 'Poppins';
    font-size: 1.7vw;
    font-weight: 600;
    text-decoration: none;
    line-height: 2vw;
    text-align: center;
    color: black;
}

.cardText {
    font-size: 1.1vw;
    color: #555555;
    text-decoration: none;
    text-align: center;
    margin-top: 7%;
}
<section class="cardsWrapper container">
  <div class="cardWhite">
    <div class="cardContent container">
        <img class="icon" src="https://cdn.icon-icons.com/icons2/2596/PNG/512/check_one_icon_155665.png"/>
        <a class="cardHeadline">Seamless<br/>working</a>
        <a class="cardText">Thanks to cloud computing</a>
    </div>
  </div>
    <div class="cardWhite">
    <div class="cardContent container">
        <img class="icon" src="https://cdn.icon-icons.com/icons2/2596/PNG/512/check_one_icon_155665.png"/>
        <a class="cardHeadline">Seamless<br/>working</a>
        <a class="cardText">Thanks to cloud computing</a>
    </div>
  </div>
    <div class="cardWhite">
    <div class="cardContent container">
        <img class="icon" src="https://cdn.icon-icons.com/icons2/2596/PNG/512/check_one_icon_155665.png"/>
        <a class="cardHeadline">Seamless<br/>working</a>
        <a class="cardText">Thanks to cloud computing</a>
    </div>
  </div>
</section>

Edit: Using vw as shown in the code above introduced the problem, that the cards, laid out in an auto-fill grid, would for some screen sizes get bigger due to layout. The vw however would linearly decrease, destroying the ratio between card content size and card size. I played around with % as a unit, but the icon for instance does not seem to resize using that approach.

When I resize, text and icons do not resize accordingly and I have no idea how to implement said wanted behavior. How do I build my cards in a way for them to be completely responsive?

responsive css html
1 Answers

If you want to be responsive when you change the width of the screen, you need to use VW instead of px and VH.

VH means viewport height, so if you set with VW:

.cardText{ 
   font-size: 3vw;
}

When you use VH it means that it will be responsive only when you change the height of the screen.

And for icon you need to set:

.icon {
   height: 10vw;
}

Using PX isn't responsive at all. It is static.

Just change all units to VW.

Also, consider using media queries at some point.

Nemanja29120
Related