Submitted over 1 year ago

Product Preview Card using grid display

nzcastilan• 40

@nzcastilan

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Had a difficulty of changing the image from mobile view to desktop view. I first tried to use srcset but can't seem to make it work so I ended up creating a div with a background image instead.

Not sure also what is the best practice to use in this kind of scenarios. any feedback would be helpful :) Thanks!

Community feedback

namborghinii• 220

@namborghinii

Posted over 1 year ago

Looks good so far! :)

Please add a hover effect for the button and try to center the text and icon within the button field next time.

Marked as helpful

nzcastilan• 40

@nzcastilan

Posted over 1 year ago

@namborghinii Thank you so much for your feedback, I've updated my code to center the text and icon plus added the hover effect as well :) Thanks!

namborghinii• 220

@namborghinii

Posted over 1 year ago

@nzcastilan You are welcome!! (The bottom left corner needs a radius too :))

Please log in to post a comment

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