Stats preview card using flex box

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Layout in desktop looks great, though the responsive state could be better since if you try to inspect the layout, changing the screen's width before mobile breakpoint, content are being hidden. Mobile layout needs to have those font-size to be bigger since it is hard to read by now.

  I haven't tackled this one yet so I can't give an advice on it, but, if you do a site, always go with mobile first approach since this will make your layout easier to handle especially knowing what size to add a breakpoint.

  Some other suggestions would be:

  • Right now, your html or body tag has no height since you are using position: fixed on the main component. Never use position: absolute or position: fixed on a large container since this makes the element out of the flow which it currently does by now. Since you are just using it to position the layout in the center, you could have done it this way. First, remove all these props on the .container:

  position
  top
  left
  transform
  

  and on the body tag add:

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

  This way you have avoided using position props and made the layout more flexible and proper usage of css.

  • Always have a main element to wrap the main content of your page. On this one, the .container should be using the main instead of div.
  • Hero-image could use a more descriptive alt since work-place is still ambiguous compared when you see the image itself.
  • Your .info could have used ul since those are "list" of information about the company website.
  • Also, inside in those list information, those text should not be using a heading tag because they don't really give content on what the section would contain right, so better using p tag on them.
  • The .attribution should be using footer so that its content is inside a landmark element. Also, remove the position on it as well the transform.
  • Lastly, making the site more responsive, maybe going with mobile first approach. Also the font-size in the mobile layout.

  Aside from those , great job again on this one.

  Marked as helpful

  1

  ---

  

  Ali BENLEMMOUDEN•30

  @AliBenlemmoudenPosted about 3 years ago

  @pikamart thanks so much for your advices, it's so helpful. I will work on these points to do a good job, next time.

  1
• 

  othman•120

  @othmanbenhamdounePosted about 3 years ago

  the king keep going bro

  1