Skip to content
Submitted about 2 years ago

product preview card component with grids

Rajesh Singh•280
@Rajeshsingh127
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

I found it really difficult managing the images according to screen size. I worked on mobile first and it really helped me ease my work. Looking for feedback from community. Thanks ;)

Community feedback

  • Maksim•590
    @MaxTarasevichPosted about 2 years ago

    Hi RAJESH!

    Good work!

    Pay attention, your product card breaks on screen resolutions from 575 to 1100. This is because you set the width of the card block at a screen resolution over 580 to 50%.

    This point can be solved by setting, for example, the max -width value for the card block 600px , and when the screen value is 600 or less, respectively, already switch to mobile design and set small margins on the sides.

    Also be sure to add hover effects to the button with transitions!

    I hope my feedback was helpful!

    0
    Rajesh Singh•280
    @Rajeshsingh127Posted about 2 years ago

    @MaxTarasevich thanks for the feedback. I'm trying to improve on responsiveness. Your feedback provided valuable info. I'll work on it.

    0

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