Responsive "stats-preview-card" with flexbox

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  Hey there, Lazar Ristic! 👋

  Congratulations on completing your first Frontend Mentor challenge! 🎉 Good effort on this one! 👍

  I'd like to suggest doing a little more work on the responsive design of the card component. Currently, the card looks pretty good in the desktop and mobile layout, but its size and layout doesn't adjust to accommodate screens with sizes in between those two. You might want to switch to a mobile-friendly layout sooner to prevent a horizontal scroll bar from appearing along the bottom of the page and try allowing the width of the card component to dependent upon the width of the screen in the mobile layout (by adding width: 100% to the card and then giving it a max-width so that it doesn't become too wide). 😉

  Hope that small tip helps. 🙂

  Keep coding (and happy coding, too)! 😁

  1

  ---

  

  Lazar Ristic•80

  @lazza24Posted over 3 years ago

  @ApplePieGiraffe Thank You for your feedback, much appreciated. Tried to figure it out, but couldn't. Gonna check it again. Best regards!

  1

  

  Lazar Ristic•80

  @lazza24Posted over 3 years ago

  @ApplePieGiraffe don't quite understand what should I do? On card class (.flex-container when i add width: 100) nothing happens. Neither max-width.

  1

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  @Lazarr591

  Hey!

  You'll need to add both properties to an element in order to have them work together. Try something like,

  width: 100%;
  max-width: 25rem;
  

  ...on an element like .flex-container. 😉

  0