Skip to content
Submitted about 1 year ago

Single price grid component

SecretariatV•150
@SecretariatV
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

Community feedback

  • Rebecca Padgett•1,860
    @bccpadgePosted about 1 year ago

    Hello @SecretariatV. Congratulations on completing this challenge!!!🎉

    I have few tips you might be interested in to improve your solution.

    HTML 📃:

    Example:

    <body>
 <main></main>
 <footer></footer>
</body>

    CSS 🎨:

    • Font size shouldn't be pixels because pixels are absolute unit and doesn't scale when users want to change their font size in their web browser setting.

    More info📚:

    The code snippet below is updated to remove the width: 100vw and height: 100vh which are unnecessary CSS properties. The reason why you need to remove height:100h because on mobile devices component get cuts off. Adding padding: 4rem 0 give space on the top and bottom the component.

    #root {
    display: flex;
    align-items: center;
    justify-content: center;
    /*width: 100vw; */
    /* height: 100vh; */
    background-color: #e5eff5;
    padding: 4rem 0;
}

    Hope you find this useful and don't hesitate to reach out to me if you have any questions

    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