Product preview card using CSS

Community feedback

• 

  Natali 👻 Grimm•1,130

  @Grimm-NPosted 13 days ago

  Awesome job on this work—really great effort! 🌟 Keep up the fantastic work!

  A few tips to level up:

  1. Try using relative units (rem, em, %, vh, vw) instead of pixels. They’re more flexible and adapt better to different screen sizes.

  2. Focus on accuracy in layout sizes and positioning—it’s how we grow and improve! Precision helps you refine your skills and get closer to the original design.

  3. Start with the mobile layout first and then add media queries for larger screens. This “mobile-first” approach is recommended because it keeps your code cleaner and often performs better.

     /* Base mobile styles here */
     .card {
       width: 100%;
       padding: 1rem;
     }
     
     /* Media query for larger screens */
     @media (min-width: 768px) {
       .card {
         width: 50%;
         padding: 2rem;
       }
     }
     

     This way, you build up from a solid base that works on small screens, then adjust for larger ones. It’s simpler, and your design scales up smoothly!

  Marked as helpful

  0

  ---

  

  Faith Achieng•110

  @FaithAchiengPosted 12 days ago

  @Grimm-N Thank you so much...I'll make the changes

  0