responsive product review card component

Community feedback

• 

  Krushna Sinnarkar•1,100

  @krushnasinnarkarPosted 4 months ago

  Hi @Shakil-a,

  Congratulations on successfully completing the challenge!

  I have a suggestion regarding your code that I believe will be of great interest to you.

  1. Instead of using width: 45% for large screens, use max-width: 600px;:

        @media (min-width: 768px) {
           main {
               max-width: 600px;
        }
     }
     

  2. For screen sizes more than 768px, change the border radius of the picture img {} to:

     @media (min-width: 768px) {
         picture img {
             border-radius: 1em 0 0 0;
         }
     }
     

  3. Add a margin of 20px 0 to the .description, .category, and .original-price classes:

     .description, .category, .original-price {
         margin: 20px 0;
     }
     

  4. Increase the padding of the .content-container class to around 30px:

     .content-container {
         padding: 30px;
     }
     

  5. One more suggestion is regarding your media query usage. While going through your code, I observed that you use media queries for large screens. It's generally better practice to write code for large screens first (desktop-first approach) and then use media queries for smaller screens. This ensures a more responsive design.

  I hope you find this helpful, and I would greatly appreciate it if you could mark my comment as helpful if it was.

  Feel free to reach out if you have more questions or need further assistance.

  Happy coding!

  Marked as helpful

  1