Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

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

@3vilBonobo

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@aUnicornDev

Posted

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

@3vilBonobo

Posted

@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
Discord logo

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