Skip to content
Submitted about 1 year ago

Responsive 3 Column Card Section

Fabian•150
@slowjo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

<h1>?</h1>

I already know while submitting this that there will be a report saying the h1 is missing.

But in this design, I could not identify any text that could be assigned the role of an h1.

So what to do? I can't leave it like this because the reported issue will be bugging me too much!

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted about 1 year ago

    Hello there 👋. Good job on completing the challenge !

    • It's absolutely fine that you've used <h2> for your headers in this design, given that there doesn't seem to be an obvious candidate for an <h1> in the context of a single page component.

      You can ignore the error or if you want to resolve it you can create an '<h1>' element within your 'main' element that will be hidden visually but visible and readable by screen readers. The class "sr-only" hides content visually and here are the styles to copy. e.g.: <h1 class="sr-only">3-column preview card component</h1>

    I hope you find it useful! 😄

    Happy coding!

    Marked as helpful
    0
    Fabian•150
    @slowjoPosted about 1 year ago

    Thank you very much @MelvinAguilar !

    0

Please log in to post a comment

Log in with GitHub

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