HTML5, CSS, Flexbox Stats Preview Card Solution

Hey, great work on this one. Layout in desktop looks great, though the mobile layout needs to make use more of the screen-size. Right now, only users with 360px going down can see the mobile layout, phone resolution is much greater than that. I suggest to properly address this, make use of mobile first approach.

Akanksha already said some great tips, just going to add some as well:

• Avoid using height: 100vh on large container like the body tag, this makes the element's height, uses only the remaining viewport/screen's height. Inspect your layout, hover on the body tag, you will notice that it doesn't really capture all the layout. Instead, replace it with min-height: 100vh, this takes full height and expands if it needs to.
• The purple on the heading tag is missing, check that one out.
• For the card stats, you could have used ul element to nest those, since those are "list" if information.
• The word 10k 314 and the other one is not suited to be a heading tag. Use heading tag to phrases which gives overview to what is the section is all about, and those words like 10k, does not give any, use p tag on it.
• You don't need to use figure on the image, you typically use figure when you want an image to be explicitly visible to all, that is why it uses figcaption.

Aside from those, great job again on this one.

Hi. img{ max-width:100%; height:auto; }

I hope this should fix your problem. Instead of width:100%, max-width:100% will ensure the width of the image reduces when the viewport width start decreasing. Instead of height:100%, height:auto will adjust height according to width to maintain aspect ratio. In this way, the images will never be stretched or squeezed.

And keep coding.:)