Skip to content
Submitted over 2 years ago

Single price grid component built with HTML and CSS

accessibility
Adán Estévez•320
@rafdidact
A solution to the Single price grid component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

You think you can find inefficient code in my repository? let me know!

Code

Please log in to post a comment

Log in

Community feedback

  • Vanza Setia•27,715
    @vanzasetia

    Hi, Adán!

    Here are some suggestions for improvements.

    • Replace the second and the third <h1> with <h2>. There should not be more than one h1 on a page. Many <h1> elements mean many titles which can confuse the users, especially the screen reader users.
    • <h2>30-day, hassle-free money back guarantee</h2> should be <p>. It is not a heading. You can use wrap the text with <strong> tag if you want.
    • There should not be text in <span> and <div> alone. Wrap the text with a meaningful element like a paragraph element.
    • Remove font-size: 1em from the <body> styling. It is already the default styling.
    • Adjust the media query breakpoint. 1440px for grid layout is too late. The card should have a grid layout as soon as there is enough space.
    • Never limit the height of the <body>. It will not allow the users to scroll the page when the page content needs more height. So, use min-height instead.
    • Set min-height: 100vh to the <body> element as the reset styling. This way, it always fills the entire page and allows it to grow if ever needed (responsive).

    I hope this helps. Happy new year!

    Marked as helpful

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