Stats preview card built using CSS Flexbox - Mac Learns

Community feedback

• 

  DanielK•440

  @DanK1368Posted almost 3 years ago

  Hey, good job on creating the site.

  In order to get rid of HTML issue, you need to apply proper HTML5 semantics. Wrap your entire content in a main tag. You can also then apply the following to center everything:

  main { display: grid; place-content: center; }

  You also need to use an <H1> tag. Wrap your text in your .heading class in an <h1> tag, and it will solve the other issue. I also noticed that you do not wrap your other text within your div containers in any <p> tag. You should do that as well. It will assist the screen readers.

  Hope this helps :)

  1
• 

  darryncodes•6,370

  @darryncodesPosted almost 3 years ago

  Hi Mayank,

  I'd opt for this:

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

  0

  ---

  

  Mayank Agarwal•70

  @mayank-2323Posted almost 3 years ago

  @darryncodes Thanks buddy! It worked! Could you please explain why we apply the min-height as 100vh? Shouldn't the body tag automatically take the height as entire vh? Also, why does margin:0 auto; not work on the container tag simply?

  0

  

  darryncodes•6,370

  @darryncodesPosted almost 3 years ago

  You're welcome @mayank-2323, min-height sets the height of the body dynamically. The body would have the height of the design without it.

  For margin: 0 auto; to work you'd need to specify a width (ideally max-width).

  0

  

  darryncodes•6,370

  @darryncodesPosted almost 3 years ago

  You're welcome @mayank-2323, min-height sets the height of the body dynamically. The body would have the height of the design without it.

  For margin: 0 auto; to work you'd need to specify a width (ideally max-width).

  0