Skip to content
Submitted about 3 years ago

3 column card component ussing CSS Grid and Flexbox

Marialba Córdova•60
@Marialba16
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

Hello guys, how are you? This is my fourth challenge, as in the previous ones, I would like to read your comments on how I can improve or what I should avoid when coding. Thanks!!

Community feedback

  • dewslyse•3,025
    @dewslysePosted about 3 years ago

    Hello Marialba! Congrats on completing your fourth challenge. Some things to note:

    • The page isn't quite fully responsive. It's not optimized for mid-sized devices. You could set the max-width on the current media query higher. Personally, I would lose the height: 50% on the .container since it's constraining the height of the card. I would then space the card elements with either padding/margin. E.g.: .section a { margin-top: 50px; }. I would also probably lose the width: 50% and then set a max-width rather (maybe 1110px).
    • The icons are decorative and as such should have alt="".
    • Remember to also wrap the content between the <body> in a main for improved accessibility <main class="container">.

    All the best

    Marked as helpful
    1
    Marialba Córdova•60
    @Marialba16Posted about 3 years ago

    Thanks for your comment @dewslyse, I'll take it into account. I will check my code and correct. 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