Stats Preview Card Component Using flexbox and media query for mobile.

Community feedback

• 

  T

  Grace•31,010

  @grace-snowPosted over 3 years ago

  Hi I'm not sure I understand your question. You use flex-basis to control the size of flex children (height if in a colum, width if in a row)

  I think you need to use background blend mode on this with the image.

  This looks broken for me on mobile atm because content doesn't fit on screen, but it's an easy fix. Just swap height for min-height 100vh on the body ☺

  I also recommend you change your html a liitle. Semantically, think about what would be appropriate for those 3 statistics. If this was written without any styles in a normal document, how would you write those? You definitely wouldn't make numbers like "10k" into headings for other content. See if you can work out semantically meaningful and appropriate html element structure for that part of the card

  Good luck

  Marked as helpful

  1

  ---

  

  duynguyen0613•280

  @duynguyen0613Posted over 3 years ago

  @grace-snow Thank you so much for your feedback. --The problem that I had during working on this assignment was when I set my container into display: flex. The flex items inside the container were broken. The idea of setting the height to min-height was great (thanks for this tip).

  0