Responsive Card

Community feedback

• 

  Djamel1133•880

  @Djamel1133Posted about 1 month ago

  Hi,

  For your first challenge, your code is "Oh my god!!!" I really like it. However, I have a few small remarks:

  1. You have two breakpoints (@media screen and (min-width: 768px)), but in reality, they are the same. You can keep just one. If you want to follow the mobile-first approach, you can move all this:

     @media screen and (min-width: 768px) {
       .card-container {
         flex-direction: row;
       }
       .card-container .container.image-sec {
         width: 50%;
         height: auto;
       }
       .card-container .container.content-sec {
         width: 50%;
       }
     }
     

     to your first code, each in its appropriate place (selector), and keep only the code for adjustments for desktop design:

     @media screen and (max-width: 767px) {
       /* Your desktop-specific styles here */
     }
     

  2. You should use variables for colors, sizes, and more like this:

     :root {
       --white: hsl(0, 0%, 100%);
       --small-size: 14px;
       /* More variables here */
     }
     

     Then use the variables instead of fixed values. It is cleaner, and you can change them in one place.

  3-For units, use em or rem instead of fixed px for responsiveness.

  I hope this is helpful. Enjoy coding, and see you at the next challenge!

  Marked as helpful

  0
• 

  Kairo•170

  @ChikairoPosted about 1 month ago

  yes the solution includes semantic HTML

  Marked as helpful

  0