Skip to content
Submitted over 1 year ago

Single Price Grid Component

RicoRIck12•80
@RicoRIck12
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I want your suggestions what can be improved and in general what you like or you don't like :)

Community feedback

  • Elevate•240
    @i7ectorPosted over 1 year ago

    Nice work @RicoRIck12!

    To fix the accessibility warning you can add a h1 under the main tag like the example below in your HTML:

    <body>
  <main>
    <h1>Example Header</h1>
  </main>
</body>

    Then in your CSS you can either completely hide the element or make only visible for screen readers (will still be hidden) To completely hide it you can:

    h1 {
  display: none;
}

    for the screen readers you should add a class to the h1 in your HTML like:

    <h1 class="sr-only">Example Header</h1>

    Then in your CSS:

    .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

    hope this helps! good luck and happy coding :)

    Marked as helpful
    1
    RicoRIck12•80
    @RicoRIck12Posted over 1 year ago

    @i7ector thanks a lot<3

    1
    Elevate•240
    @i7ectorPosted over 1 year ago

    @RicoRIck12 no problem glad you found it useful :)

    1

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