Responsive Stats preview card with CSS, Flexbox and Grid.

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.

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!

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 :-)