Skip to content
Submitted about 2 months ago

Responsive 3-column preview card component using CSS grid and flexbox

Jessica•70
@JesNetWD
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I made my layout responsive across various screen sizes.

What challenges did you encounter, and how did you overcome them?

At first even though I made all my columns side by side, they were of unequal length. Using CSS grid instead of float helped with that. I also edited my solution to make it more responsive across various screen sizes.

What specific areas of your project would you like help with?

No major problems but please let me know if the different layouts are visually appealing.

Code

Please log in to post a comment

Log in

Community feedback

  • Refat•10
    @Refat-web-dev

    The solution demonstrates a decent structure and some use of semantic HTML, but the responsive design is seriously lacking and performs poorly across screen sizes. On mobile devices, the layout collapses into a block format, but the spacing feels cramped, margins are inconsistent, and some elements appear misaligned or too tightly packed. The media queries are overly rigid and rely on fixed breakpoints instead of using more fluid, flexible techniques like auto-fit and minmax() with CSS Grid. This results in a layout that looks broken or awkward on anything between 420px and 882px — which is a huge range of common screen sizes. While the general structure and styling are clean, the adaptivity is not user-friendly and needs major work to be considered responsive by modern standards. Accessibility also needs improvement, particularly in the use of empty alt attributes and the misuse of <a> tags styled as buttons. Overall, the code has potential but lacks polish where it matters most: in making sure it works well across devices.

  • Nikhil Tanwar•260
    @NikNT

    Great solution Jessica! Looks good.

    One thing I noticed, when I hover over the buttons the overall component stretches up a few pixels. If you touch up that, your solution would be perfect.

    Keep up the great work! :)

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