Skip to content
Submitted over 3 years ago

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

Irinella B.•80
@3vilBonobo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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.

Community feedback

  • Yashasvi Singh•890
    @aUnicornDevPosted over 3 years ago

    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
    0
    Irinella B.•80
    @3vilBonoboPosted over 3 years ago

    @aUnicornDev Thank you very much for your feedback, I will try to improve my solution asap based on your advice

    0

Please log in to post a comment

Log in with GitHub

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