Responsive product preview card component with hover effect

Community feedback

• 

  Eric Winkelspecht•310

  @ericwinkPosted about 2 years ago

  Hi Atanu,

  Great work on the challenge! Keep up the great work and keep coding!

  It looks like you have your mobile view kick-in at a width of 420px. You may want to consider adjusting that to around 600px. Using the responsive view in inspector in Chrome, the edges of the card hit the sides of the screen at around 575px or so, resulting in the design squishing down until you reach the 420px. If you aren't already using inspector in whichever browser you prefer (Chrome or Firefox are great!) play around with the different view widths and set your breakpoints at the spots where the UI breaks down.

  Hopefully this helps!

  Marked as helpful

  0

  ---

  

  Atanu Malik•40

  @AtanuMalikPosted about 2 years ago

  @ericwink Ok, I got your point. I will change the breakpoint to 580px. Thank you for the feedback.

  0
• 

  Vincent Daniel•410

  @davinceeyPosted about 2 years ago

  Hello Atanu Malik. Congratulations on finishing this project! I just previewed your site and it is beautiful. I saw the hiver effect used on the image, so apt!😁 I just have a small tip actually:

  You might want to replace your h3 tag with the h1 tag and then, you can set the font-size of your body to inherit so that you can set the font-size of your h1 to what you want (this is totally optional). But changing the h3 to h1, would be good HTML practice as it obeys the order of hierarchy.

  Hope this helps you. Happy coding!👊

  Marked as helpful

  0