Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

3 column preview card component solution

@ispirar2

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any helpful suggestions would be nice

Community feedback

Vanza Setia 27,795

@vanzasetia

Posted

Hi, Molhem Marawi! 👋

It looks like the code repository is not a public repository. It gives me a 404 page when I try to view the code. So, I would recommend making it as public repository. 😉

Also, I notice that the site is not fully responsive. For example, on 768px, the cards are having full width. Not only that, the layout of the cards would turn into a three-column layout at 1440px which is too late (even my desktop screen is not that large). So, I would recommend adjusting the breakpoint of the media query and then add max-width to the main element to prevent the card from becoming too large.

One more thing, try to run the CSS code on the CSS validator. I notice an invalid property while inspecting the site with the developer tool.

That's it! Hope you find this useful! 😁

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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