Skip to content
Submitted about 1 year ago

Stats Preview | Plain HTML and CSS

Nikhil Tanwar•260
@NikNT
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hey everyone!

This was a nice challenge and I have tried to keep the overall output similar to the design.

There is some issue with the mobile layout. When I access this app in Safari, the border radius is not shown. But, in Chrome, it is all correct. This is a critical issue I am facing.

As always, I am open to suggestions to help me improve the code.

Keep Coding!

NT

Community feedback

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

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

    I checked your code and figured out the border radius issue.

    • Update your border-radius using the code: border-radius: 8px 8px 0 0;

    • Your HTML structure needs to be fixed due to lack of semantic tags.

    • Every website should have at least one landmark like a main tag

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

    CSS 🎨:

    • I found the issue with your container styles and that is reason why your component gets cut off at the top and bottom.
    container {
    /* height: 100vh; */ /* width and height  CSS property sets elements to specific width or height */
    /* width: 100vw; */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Min-height defines the minimum height of an element*/
    padding-block: 4rem / *Adds spacing on the top and bottom of your card*/
}
    • Remove width and height in the media query as well
    @media only screen and (max-width: 768px)
.container {
    /* height: 100vh; */
    /* width: 100vw; */
    overflow: hidden;
}

    I would suggest you use em units for media queries because they work better across all web browsers.

    More info📚:

    PX, EM, or REM Media Queries

    Here is my solution to this challenge:Stats preview card component

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

    Marked as helpful
    1
    Nikhil Tanwar•260
    @NikNTPosted about 1 year ago

    Hi @bccpadge

    That is quite a detailed review of the code and you've put forward some serious suggestions and recommendations. I will surely incorporate these in this and upcoming projects.

    Thanks for helping me become a better developer!

    NT

    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