HTML, CSS

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Hi

  I'm afraid I think you should start this project again. Definitely start the styles again at least.

  First in html

  • I'm not sure why there are 3 font import links?
  • it needs to have better semantic structure. The h3s don't make sense as h3s. The stats numbers need to be in the same paragraph or list item as the word accompanying them (so you end up with 3 paragraphs or 3 list items, then use spans or strong tags to style the number as display block)
  • make the formatting consistent so it's easier to read
  • remove IDs. They are not for styling and you have no use for them in this challenge. Use classes instead
  • use the picture element for the image so the browser can use the mobile version by default and the desktop version when screen over a min-width allows
  • add an alt attribute to the image

  In css

  • include a basic css reset at the start of your stylesheet to remove all browser styling
  • remove all floats. That is an old technique you will rarely ever have to use nowadays. Use flexbox for this instead
  • only ever write font sizes in rem or em, never px
  • start from the mobile version of this component, in a flex Column-reverse
  • when there is room for the layout to change to desktop version, add a min-width media query to change flex-direction to row
  • use max-width on the card and flex-basis on the two parts (the flex children)
  • no need for height except maybe a min-height on the mobile image

  I hope this helps. Good luck

  Marked as helpful

  0

  ---

  

  Hawawu Oladipo•90

  @bolanleolaPosted over 3 years ago

  @grace-snow thank you so much for the feedback. I will definitely work on the corrections

  0

  

  Hawawu Oladipo•90

  @bolanleolaPosted over 3 years ago

  @grace-snow kindly find the url to the corrected solution; https://bolanleola.github.io/statspreviewcard/

  0

  

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  @bolanleola you need to check small mobiles, it's extremely narrow.

  You can update the links on here by the way. Click challenge hub and update links as needed, and code can be updated through usual git push, no need for a new repo or anything

  0