Stats preview card component solution

Community feedback

• 

  P

  Remus D. Buhaianu•3,125

  @MiculinoPosted almost 3 years ago

  Hey @Mansour0007

  Good job on completing the challenge. It looks pretty nice!

  Here are my suggestions based on your final solution:

  • Consider adding some padding-right on the .all-text div on larger screen sizes to push the content a bit more

  • You can also add some horizontal padding on the body element to make sure there's enough space around the card itself

  • On smaller screen sizes, consider adding vertical padding on the body element to make more space for the card at the top and bottom

  • Try to avoid using px (except maybe for small values between 1 - 10px) and instead, use relative units such as rem, em, vh / vw, % - they're better alternatives for building responsive layouts

  • Don't use fixed values for your width and height, especially if they're px based. Build your layout around the content that's available. If I recall, you can build this project without using the height property at all. If you use it, it can complicate everything unnecessarily.

  Hope this helps. Keep up the amazing work!

  Marked as helpful

  1
• 

  darryncodes•6,370

  @darryncodesPosted almost 3 years ago

  Hi Mansour

  I really appreciate your design, it's a good effort.

  Some thoughts from me:

  • try max-width: 375px; on .card @media (max-width: 475px). try to avoid setting fixed widths, that messes up the responsive design
  • you could explore background-blend-mode: multiply; and remove the opacity to get the image overlay a little closer to the design

  Here are some really useful resources too:

  • A Complete Guide to Flexbox - css tricks
  • Learn Flexbox for free - Scrimba
  • Responsive Web Design - freeCodeCamp

  All the best

  Marked as helpful

  1
• 

  Mansour•220

  @Mansour0007Posted almost 3 years ago

  Thank you Buhaianu Remus for helping, very informative response i will try everything you mentioned hopefully i will get it right thank you

  0
• 

  Mansour•220

  @Mansour0007Posted almost 3 years ago

  Thank you darryncodes much appreciated i've just started the course Conquering Responsive Layouts by Kevin Powell and the first video was about avoiding fixed width just like you said 👌 and defintly will try background-blend-mode: multiply; and see the results thank you again

  0