stats preview card component

Community feedback

• 

  Riyana Gueco•495

  @rnguecoPosted over 3 years ago

  Hey Nigel!

  To make centering of elements easier, set your container's minimum height to the height of the viewport (i.e. min-height: 100vh) so that you can use Flexbox's easy way of centering:

  container {
     min-height: 100vh;
     display: flex;
  
     /* This will center the children vertically and horizontally */
     justify-content: center;
     align-items: center;
  }
  

  It's important to note that this will not work unless your container height is the full height of the viewport.

  Aside from that, you could also make your mobile design kick in at an earlier breakpoint (maybe 600px?) so that the content and image won't get squeezed in as the viewport width gets narrower.

  Good start nonetheless! Happy coding! 🎉

  Marked as helpful

  1