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

Responsive page with CSS Grid

@iulian-cenusa

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 feedback will be greatly appreciated!

Community feedback

dewslyse 3,025

@dewslyse

Posted

Hello 👋 . Good job on your submission.

Somethings to note. Your card is quite responsive. However, there's a horizontal scroll bar between 767px and 832px. You may want to address that.

Also, you may want the wrap the main/dominant components of your html within a <main><\main> tag. This will resolve the accessibility issues raised in the report.

<body>
     <main id="main">
     .
     .
     .
     </main>
</body>

Happy coding 💻

Marked as helpful

2

@iulian-cenusa

Posted

@dewslyse Hi !

Thanks for the tips and for raising the issue with the horizontal scroll. I manage to fix that by changing media query from 1000px to 1200px.

Thanks again!

1
dewslyse 3,025

@dewslyse

Posted

@iulian-cenusa you're welcome.

0

@dpkpx

Posted

button:hover { cursor: pointer; background: none; color: hsla(0, 0%, 100%, 0.75); border: 2px solid hsl(0, 0%, 95%) }

will work for all of your buttons in active state

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