Skip to content
Submitted about 3 years ago

3-Column Card Component made using HTML and CSS with Flexbox

Aliaa•25
@aig0041
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 everyone!

I'm still new to using flexbox and media queries and I'm not sure if I have done it correctly, so please do let me know if I have made any rookie mistakes. It was not very difficult, but I'm sure there are some things I missed or could have done better, so I would really appreciate any feedback and suggestions to improve the code in anyway. And it seems that the screenshot taken has a few issues with the border and alignment of the card component but when I open the site URL, everything looks fine, can someone let me know why this is happening?

Community feedback

  • Mieszko•325
    @MieszkoKowalikPosted about 3 years ago

    Hey, good work on recreating the design.

    My suggestion for future is that you should look up responsive web design. Basically you should avoid setting fixed-absolute dimensions and instead use relative units like: rem, em , percentages, vw, vh and such. This will mean that your site will be able to adapt to different resolution devices.

    Marked as helpful
    0
    Aliaa•25
    @aig0041Posted about 3 years ago

    @MieszkoKowalik Alright I'll definitely look into it. Thank you.

    0
  • Nabil•160
    @Nabil19911Posted about 3 years ago

    Hey nice work, if you want to make your card be in the center of your body, set the display flex, justify-content center, and align-items center this way you can center your card. this is not the only way to center the element you can google it find more of it. this way I prefer.

    Marked as helpful
    0
    Aliaa•25
    @aig0041Posted about 3 years ago

    @Nabil19911 Okay, I will try this. Thank you!

    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