Skip to content
Submitted 20 days ago

Responsive Product review card

Tj-wo•80
@Tj-wo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?
  1. Adaptive Images: ability to seamlessly switch between images based on different screen sizes, ensuring an optimal visual experience for users.
  2. Responsive Grid: capacity to adapt grid layouts to various screen sizes and devices has enabled me to provide a cohesive and user-friendly interface.
What challenges did you encounter, and how did you overcome them?

Getting images and layouts to switch depending on screen sizes. I read the recommended free courses to achieve the desired outcome

Community feedback

  • Mohamed Hamdan•80
    @Muhammed-HamdanPosted 20 days ago

    Hey, your design looks great ! You can slightly improve it by paying attention to following details:

    1. Increase line-height in the product description
    2. Increase letter-spacing in the PERFUME text
    3. The image has a rounded border on all sides, but it must be rounded only on the sides shared with the parent.
    1

Please log in to post a comment

Log in with GitHub

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