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

Irina 80

@irinani

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

Irina, hi!

This challenge has also been pretty good, if you want to eliminate that problem by not having placed a h1 you can do it by placing inside the <main> a <h1> with the text you want inside and place the class sr-only.

This class has the following attributes:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0,0);
  border: 0;
}

Its main function is not the one we are placing, but it will do for now. If you want to know more about it, search in web accessibility but you can also learn it in the responsive HTML and CSS course of freeCodeCamp.

And with this you can update the frontend mentor report and not get any errors.

Good Coding!

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