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 3-column preview card component using grid

ibimina 490

@ibimina

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

Danilo Blas 6,300

@Sdann26

Posted

Hello,

Your project has turned out very well but just in case the only problem I see is that you have put 3 h1 and you should only have one per project, so what you will do is to change the h1 to h2. But now we have the problem that there is no h1 in the project, so we could do the following.

To do this you can add it inside the main tag with the title you want and you will add to the h1 the sr-only class with the following attributes:

.sr-only {
  position:absolute ;
  left: -10000px;
  width: 1px;
  height:px ;
  top: auto;
  overflow: hidden;
}

The idea behind this is that the h1 is still in the project flow but is not displayed so it won't alter your layout, and the screen reader will detect it.

Good luck!

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