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

flexbox

@fcojsanchez55

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

Community feedback

romila 3,570

@romila2003

Posted

Hi Jorge,

Congratulations 🎉 on completing this challenge, it was a great attempt.

When looking at your design, I noticed the lack of responsiveness when shifting from 501px to around 907px. The reason for this is most likely because of your approach for your media queries. It is best practice to use the mobile-first approach since it would be easier to adjust the elements when increasing the screen size. So, instead of giving your body a property of media screen and (max-width: 500px), you should use the min-width property instead as it will be easier to control the container.

Another minor issue is your background-color, I think you forgot to set it as the var(--Very-light-gray) style, for your body.

Overall, good attempt and wish you all the best for your future projects 👍.

Marked as helpful

0

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