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: 150px;
        color: black;
    }

    .cardHeadline {
        font-family: 'Poppins';
        font-size: 4vh;
        font-weight: 600;
        text-decoration: none;
        line-height: 50px;
        text-align: center;
        color: black;
    }

    .cardText {
        font-size: 3vh;
        color: #555555;
        text-decoration: none;
        text-align: center;
        margin-top: 1em;
    }

<section >
  <div >
    <div >
        <img  src="https://cdn.icon-icons.com/icons2/2596/PNG/512/check_one_icon_155665.png"/>
        <a >Seamless<br/>working</a>
        <a >Thanks to cloud computing</a>
    </div>
  </div>
    <div >
    <div >
        <img  src="https://cdn.icon-icons.com/icons2/2596/PNG/512/check_one_icon_155665.png"/>
        <a >Seamless<br/>working</a>
        <a >Thanks to cloud computing</a>
    </div>
  </div>
    <div >
    <div >
        <img  src="https://cdn.icon-icons.com/icons2/2596/PNG/512/check_one_icon_155665.png"/>
        <a >Seamless<br/>working</a>
        <a >Thanks to cloud computing</a>
    </div>
  </div>
</section>

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?

CodePudding user response：

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.