Stats Preview Card Component

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Desktop layout looks great, it is responsive but at some point like 410px going up, you will see that the layout is occupying all the width/height and the layout is squished. Mobile state looks great though.

  Some suggestions would be:

  • There are invalid variables on your :root selector, check those ones out.
  • Don't use position: absolute a very large element. If you inspect your layout, hover on either html or body tag, you will notice that it has no height since its element is being absolute. Since you are just using this to center the layout, it would be much better to do it this way. But first, remove these stylings on the .container:

  position
  top
  left
  transform
  

  Then on the body add these:

  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  

  This will make sure the layout is centered and you avoided using position: absolute.

  • Always have a main element to wrap the main content of the site. For this use main tag on the .container selector.
  • You could have used ul for the .row selector since those are list of items that are inside it.
  • Each item of the .row are just regular text. Using heading tag on those does not really add any information about the section. A p tag would be nice to wrap each text.
  • When using img tag, you don't need to add words that relates to "graphic" such as "images" and others, since img is already an image so no need to describe it as one.
  • Lastly, just for the breakpoint that I told you at the beginning to be addressed.

  Aside from those, great job again on this one.

  Marked as helpful

  1

  ---

  

  CleanCoderK•160

  @CleanCoderKPosted about 3 years ago

  @pikamart Thanks for your detail comments. I've changed my code base on your suggestions. Really thanks for your idea of centering main layout. For img tag, "images" is used only for routing image file because I put image inside "images" folder.

  1