Submitted

Stats Preview Component with Flexbox

Ken 455

@lmaoken

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View Challenge

Design Comparison

SolutionDesign

Report

1

Accessibility Issues

0

HTML Issues

View Report

Ken’s questions for the community

MY SECOND ATTEMPT AGAIN -- I spent a good week reviewing how Flexbox works and how I can center content correctly to follow frontendmentor's format. I also tried my best to make the page responsive by making media queries for 375px.

Any feedback is genuinely appreciated, I study hours a day to try and perfect everything on here.

Community Feedback

P

@dialectrical

Posted

This looks really good, but it looks like your card might be a little smaller than the design! Tweaking the card's height and width to get them maybe 30-50px might help.

1


Ken 455

@lmaoken

Posted

@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

0

P

@dialectrical

Posted

@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!

0

P
Anthony 275

@ACdev27

Posted

In mobile view the image looks a little squeezed/distorted. You may want to research the CSS object-fit property, it can help with situations like that.

0


Ken 455

@lmaoken

Posted

@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.

0

P
Anthony 275

@ACdev27

Posted

@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.

Marked as helpful

1

Ken 455

@lmaoken

Posted

@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

0

P
Anthony 275

@ACdev27

Posted

@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.

0

Give some feedback to @lmaoken about their solution...

Slack logo

Join our Slack community

Join over 80,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!