Responsive stats card using flex

Community feedback

• 

  Rashi•165

  @shangumPosted almost 3 years ago

  Hey @Tiyana19 I checked out your design. I am fairly new to front end design myself so please take my points with a grain of salt.

  I noticed that when viewing your project on mobile (screen width of 375px) that the design does not appear to be responsive. At this size the purple image should be appearing above the text as opposed to being on the left side. I believe that updating the “grid-template-columns” value when the screen width is smaller may do the trick in this case. Feel free to investigate. Also don't forget about the "mobile-design.jpg" file.

  Your question - “why it looks like that the width that is set for my card get shrink on the Github page” ..… I am not clear on what you mean in this question. Perhaps investigating the “min-width” and “max-width” rules would help you here. Also some left and right margins could be useful for keep your card from touching the screen edges on smaller screens.

  Your question - “ the font size looks bigger on the Github page” … I didn’t notice anything odd with your font sizes. Are you comparing the font sizes of the Front End Mentor design previewer with your GitHub pages design? It could be that the previewer on Front End Mentor is slightly distorting the design causing it to look smaller on here. Just my guess.

  Way to go otherwise. Hopefully some more experienced designers can give you some better feedback and correct/adjust the things I mentioned above.

  Hope it helped a bit.

  Marked as helpful

  1