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 Card using HTML CSS & Grids

Devesh 120

@devesht21

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


what I can improve in terms of best practices?

Community feedback

Account Deleted

Hi Devesh,

The sites looks very good. An issue I saw was when the browser shrinks, the cards stay the same. I suggest you change your .card-container to be one column. You can do that by changing your grid-template-column to 1fr. From there, you can change your max-width so it doesn't cover the entire screen.

Also, I believe you only use rem for font-size, not max-width. You would use em for that. For an explanation why, I suggest you google it.

The only other thing I have to say is not considered best practice to use display: flex for your body. If you want to center your .card-container, then I would create a main tag above .card-container & change .card-container to a div tag. Then, put your display: flex & all its components within that main tag.

I hope all that helps you.

Marked as helpful

1

Devesh 120

@devesht21

Posted

@mrsimms430 Thank you for your helpful feedback. I will take care of that in the next project. Thanks once again!

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