Skip to content
Submitted over 3 years ago

Responsive 3 Column Preview Card Using CSS Flexbox

Paisley•55
@simpsonpaisley
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

Hi,

I hope this is mostly correct. One issue I am having is that the card heights are different when changing the size of the page. Once the page reaches a certain width, the cards are fine, but until then they seem to be different heights. Is there anything I can please do to change this?

I also think I may have used too many classes, and could have used more specific selectors such as nth of type selectors or descendent selectors. Is the way I have done it easily readable?, or should I adjust it to make it easier to read and change for other people?

Thank you very much, any feedback is definitely welcome.

Community feedback

  • Yashasvi Singh•235
    @Yashasvi2704Posted over 3 years ago

    Hi Paisley,

    For the heights problem that you mentioned,

    1. You know flexbox as you used it in you cards. You could use it in the card itself .part to line up the items vertically .

    . 2. Instead of of having padding :10%; overall, you can just have an defined height for your .part element and vary the padding between the elements.(you can visit my solution if you wanna do that way.)

    For the second point that you mentioned, you might wanna look into the BEM framework( nothing to worry.. it's not like a JS framework😛). It just guides you for the naming convention of the CSS classes. There are alternatives available for BEM. Choose whatever you want.

    Marked as helpful
    0
    Paisley•55
    @simpsonpaisleyPosted over 3 years ago

    @Yashasvi2704 Thank you for your reply, I will try those changes out, and have a look at the BEM framework you mentioned. Thanks :)

    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