Skip to content
Submitted almost 4 years ago

Responsive cards using flexbox and css variables

anna•340
@annab6
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

My solution seems similar to the designs, but don´t know, if the code is well-organized and what could I improve. Grateful for any suggestions/critics/feedback!

Code

Please log in to post a comment

Log in

Community feedback

  • Manoj Kumar Singh•530
    @manojks092

    Nice work out there, but its not completely responsive, resize the screen and around 769x657 you'll find that the cards isn't responsive, it should increase or decrease the height of the cards together. Kindly revisit your code or it'll be better if you use flexbox(as flexbox always keep same height for the elements) . Hope it'll be helpful. Enjoy coding

    Marked as helpful
  • Shashi Lo•1,345
    @shashilo

    Looks really close to the design Anna. The colors look great and the overall implementation is clean. Here's some nit picky things I saw that can improve:

    • When I over lay the design onto your implementation, the size is incorrect. The width is too and tall.
    • Remove the padding top/bottom from the <body>. This is making the window taller than it should be.
    • The icon spacing between the title is slightly off. But on mobile, it needs more work.
    • The breakpoint you have @ 760px should be 768px. Follow these breakpoints for modern screens. Also, if you use min-width instead, it will be a mobile first approach. https://getbootstrap.com/docs/5.1/layout/breakpoints/
    • On your buttons, add border: 2px solid transparent; to the regular state. This way when the hover state comes into play, it doesn't add an additional 4 pixels to the height and width making the elements shift.
    Marked as helpful
  • Davide•1,705
    @Da-vi-de

    Hi Anna, it looks good, nice result for this challenge, well done! My suggestions are

    • You can give as many classes as you need, it's better than styling the element, of course this project is very small and it's ok, for bigger projects is better a heavy class approach though.

    • The <article></article> element needs a heading right after the opening tag, i think if you used divs instead, you had no issues in your report because the <img> has alt attribute, h1 and p are recognized by screen readers, so the code is already accessible.

    Happy coding :-)

    Marked as helpful

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