Stats Preview Card [HTML, SASS]

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  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

  ---

  

  Florin Pavel•240

  @florinpavel22Posted over 3 years ago

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

  0