Skip to content
Submitted about 1 year ago

responsive product review card component

Shakil ahmed•260
@Shakil-a
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

im proud that its my first time i used a mobile first design approach and worked on responsiveness, i would definitely look more into different aspects of responsive design and how to refactor my code so the layout is responsive on all screen sizes

What challenges did you encounter, and how did you overcome them?

i found it hard from making my card component go from the mobile scree size to the desired design on desktop and all the screen sizes in between

What specific areas of your project would you like help with?

i need help on wondering how to make my image responsive as on a tablet size it is not clear and on the large laptop size, my content seems to get smaller and all up in the container which isnt the desired design. it looks good on the small laptop screen size though around the 1000px mark.

Code

Please log in to post a comment

Log in

Community feedback

  • Krushna Sinnarkar•1,080
    @krushnasinnarkar

    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

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord