Stats Preview Component with Flexbox

Community feedback

• 

  P

  Michael Camele•75

  @dialectricalPosted about 3 years ago

  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•935

  @kenreibmanPosted about 3 years ago

  @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

  Michael Camele•75

  @dialectricalPosted about 3 years ago

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

  Anthony•355

  @ACdev27Posted about 3 years ago

  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•935

  @kenreibmanPosted about 3 years ago

  @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

  

  Anthony•355

  @ACdev27Posted about 3 years ago

  @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•935

  @kenreibmanPosted about 3 years ago

  @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

  

  Anthony•355

  @ACdev27Posted about 3 years ago

  @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