Skip to content
Submitted almost 4 years ago

3-column preview card component made with HTML and CSS, part of Fronte

Irinella B.•80
@3vilBonobo
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

When changing the width of the browser, sometimes the middle card changes height in relevance with the other two. I'm guessing it has to do something with the padding or the paragraph text but any explanation on that "bug" would be more than welcome.

Code
Loading...

Please log in to post a comment

Log in

Community feedback

  • Yashasvi Singh•890
    @aUnicornDev

    You card does not have a fixed height to begin with. All the content in the cards and the padding, margins etc. of that content make up the height of the card.

    Due to different content in the <p> tag as you said, the height of the card varies.

    One solution to this is

    Use a fixed height card.. And set flex on the card in the column direction. Then you can use the padding to position the elements in the cards. Can set padding/margin to auto if you want to use variable padding/margin.

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord