Stats preview card component with flexbox

Community feedback

• 

  Aaron Varga•370

  @avinnoPosted about 1 year ago

  Great job on this challenge!

  I don't see any significant issues or have many suggestions except for:

  • At 1299px wide and smaller, your project starts to show a white blank area at the very bottom of the page in you body. Setting "min-height: 100vh" on your <main> will fix this.
  • If I am being critical, I might also suggest adding some padding or margins to your body/main respectively so the content area is not right against the top/bottom of the page on mobile version.

  I like how you used the <picture> tag for image queries for desktop vs mobile.

  I look forward to seeing more completed challenges from you!

  Marked as helpful

  0

  ---

  

  Paul Ryan•190

  @Gunner40Posted about 1 year ago

  @thenihilistdev Thank you Aaron. I had put "height: 100vh" on the main element. I changed this to "min-height: 100vh" and it fixed the problem. I also added "padding-block: 5em" to the main element and this stopped the component from hugging the top and bottom of the screen on mobile devices, which looks much better. I also added a breakpoint at 1000px and changed some settings which improved the look of the component for screens of that size. Thanks for your help. Paul.

  1

  

  Aaron Varga•370

  @avinnoPosted about 1 year ago

  @Gunner40 I am so glad to hear! Thanks for your reply to my feedback as well!

  Always here to help. Great job on your initial project and good job on updates as well!

  I look forward to seeing more of your project/challenge solutions!

  0