Submitted over 2 years ago

Responsive cards using flexbox and css variables

anna• 340

@annab6

Preview site View code

This is a solution for...

3-column preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

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!

Community feedback

Manoj Kumar Singh• 530

@manojks092

Posted over 2 years ago

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

anna• 340

@annab6

Posted over 2 years ago

@manojks092 Thanks for your feedback! What is a good way to fix that in your opinion? I am using flexbox already. I am using body as a flex container. Should I put all the 3 cards inside a div and make it flex?

anna• 340

@annab6

Posted over 2 years ago

@manojks092 Already fixed with adding flex container around the cards Thanks!

Manoj Kumar Singh• 530

@manojks092

Posted over 2 years ago

@Anna60991 exactly, you can wrap all the elements in the container, and its not important to turn body element as a flex container, actually if you use mobile first approach then you'll notice that oftenly you dont have to use any layout method(such as grid /flexbox) for the mobile-first approach, and then for the responsive part you can add container for wrapping the element and make them flex items. Hope it'll be helpful

Marked as helpful

Manoj Kumar Singh• 530

@manojks092

Posted over 2 years ago

@Anna60991 Great work there. No need to thanks. All the best and happy coding

anna• 340

@annab6

Posted over 2 years ago

@manojks092 will try the mobile-first approach on the next project, thanks!

Shashi Lo• 1,345

@shashilo

Posted over 2 years ago

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

anna• 340

@annab6

Posted over 2 years ago

@shashilo thank you millions for the detailed feedback!

padding on the body - removed
breakpoint fixed, thanks for a table
button border fixed, now it´s not moving On the next project, I will try a mobile-first approach!

Davide• 1,725

@Da-vi-de

Posted over 2 years ago

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

anna• 340

@annab6

Posted over 2 years ago

@Da-vi-de thanks a lot! I´ve substituted <article> elements with <div>. As for classes - will use them in the next project instead of elements!

Please log in to post a comment

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