Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Stats Preview Card [HTML, SASS]

@florinpavel22

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Felt like coding so I made this little project, however I realize I'm still struggling on the media queries, especially on layouts like these. What do you think?

Community feedback

@pikapikamart

Posted

Hey, great work on this one. The layout in desktop is somehow wider and the mobile state, there is this scrollbar.

First, some suggestions would be that:

  1. Please refrain from using height: 100vh, using this will make your content have only height based on the screen or viewport. Which in your case, the body tag have it, and if you resize your browser, the layout is destroyed and got small. Instead of this, use min-height: 100vh, this will make sure that the body will get atleast a minimum of 100vh of the browser. By doing this, you should add a padding to the top and bottom of the info selector.

  2. Also, I saw a lot of usage of percentages(%). Just make sure that you tested well enough the layout since when they are nested, somehow it is really hard to handle. That is why we tend to use rem unit.

  3. Your heading (h2) could be h1. But this is just preference. But using h1 in a webpage is a good way.

  4. By doing those mentioned above, you could just remove the overflow declarations on your container selector. This also makes the breakpoint much cleaner.

  5. The mobile state, remove the width: 100vw declaration, this causes a scrollbar at the bottom or horizontal swipe.

5.1. Also on the mobile state, it will be really good if you somehow adjust the padding on the info selector, so that the text will have more width and not clamped.

But still, really good job^

0

@florinpavel22

Posted

@pikamart Hi, thank you so much for the detailed feedback. I have taken it into consideration and made adjustments to the layout. :)

0

Please log in to post a comment

Log in with GitHub
Discord logo

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