Stats Preview Component with Flexbox

@dialectrical I seem to run into the same issue over and over again every time I try these challenges. Can you check out my recent solution and let me know what I keep doing wrong by any chance? I appreciate your feedback.

Recent Project

@lmaoken It still looks like there might be a sizing issue. If you are using relative sizing units, make sure you are taking into account that the design provided is for screen widths of 1440px!

@ACdev27 When I inspect the page and turn it into a mobile resolution (375px) it looks fine. I don't understand why it's not working when I actually go on my phone.

I have a media query specifically changing the layout when you get to 375 pixels.

@lmaoken Yes, I looked at it again, and at 375 px width it looks fine.

I know for these newbie projects they don't seem to care about the tablet view. But in real world project I think you would have to make sure it looks good at all screen sizes 320px - 1920px.

Right, now if you look at your component at screen widths like 400px, 500px, and 600px, the text and image look too narrow and cut off.

But, of course these tablet sizes are not part of the challenge I guess, but certainly for skill building, I think it is good practice to make it also look good at those tablet screen sizes.

@ACdev27 I attempted media queries for all screen sizes on my most recent project. I seem to still have issues when it comes to trying to get an exact match with the original design though. Is it possible for you to take a quick look at what I could do to get my project to match the original design?

Recent Project

@lmaoken On your widest screen view the cards seem too wide. You have a width of 64%. I would try to make use of max-width property to get cards inside .card to more exact match to design.

Then for screen widths from 1300 - 850, the cards are in one column stack, and seem way too wide. When then they are on on column you can still do something to control their width do not so wide. I would use again a max-width to they stay acceptable width.