Responsive Stats preview card with CSS, Flexbox and Grid.

Community feedback

• 

  Juveria Dalvi•1,375

  @Juveria-DalviPosted about 3 years ago

  Hey..😊 So the accessibility issue says you should have <main> tag which is a semantic tag, wrap your all divs inside the main tag except for the div with class attribution that should be wrapped in <footer> tag.

  Marked as helpful

  1
• 

  darryncodes•6,390

  @darryncodesPosted about 3 years ago

  Hi Nguyen,

  I second what Davide has said, great solution but could be even better if you introduced a mobile version.

  One way to do it is to change your grid declaration with a media query

  @media only screen and (max-width: XXXpx) { .wrapper { grid-template-columns: 1fr; } }

  and add grid-row: 2 / 3; to .stats-container at the same media query to swap the order of the image and content.

  Here is a really comprehensive grid guide

  All the best!

  Marked as helpful

  1

  ---

  

  Nguyễn Hoàng Ân•55

  @anhoang241998Posted about 3 years ago

  @darryncodes Hi darryncodes,

  I really appreciate on your feedback. I will look look into your guide website and change the solution. Cheers!

  Regards, Nguyen Hoang An

  0
• 

  Davide•1,725

  @Da-vi-dePosted about 3 years ago

  Hi, it's a good result but it could be perfect, there's just a problem with the responsiveness of the website.

  • First thing first i encourage you to change approach and start the mobile version, that's the professional and modern way of working. I believe you work with the dev tool set on responsive mode, just determine the width you want to work at, for example 350px, build your project and then add media queries min-width: ... trying to respect devices screen size!

  • I didn't do this challenge but i guess the image shouldn't be cropped because it's the desktop version, you change it too early, so i think it's better keeping the column and resize it for tablet width.

  Hope it helps, keep coding :-)

  Marked as helpful

  1

  ---

  

  Nguyễn Hoàng Ân•55

  @anhoang241998Posted about 3 years ago

  @Da-vi-de Hi Da-vi-de,

  Much appreciated for all your feedback. As you noted that I need to focus on mobile first rule and for the image, you were right, I cropped it too early. I would love to change the solution in the near future. Finally, thanks for your feedback. Cheers!

  Regards, Nguyen Hoang An

  1