Skip to content
Submitted about 1 month ago

Product Preview Card

Marcus•120
@marcus-hill
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?

Use of flexbox in order to easily make the layout shift from vertical to horizontal as the browser size increases (to a desktop view).

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

It was difficult initially to create the switch to a desktop view (horizontal) after initially designing mobile first. However, once I was able to make the content wrap and adjust the margins, it met the design.

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

Feedback on the media queries used in order to make this responsive. Should it be done in this way?

Community feedback

  • Mckaay•140
    @MckaayPosted about 1 month ago

    Hi,

    In your solution the flex items are not same width. On the design they have equal width, I dont know if u used the correct image for desktop. On the second price I dont see line through as text decoration and Im also not sure if it should be aligned vertically in the middle.

    Greetings!

    0
    Marcus•120
    @marcus-hillPosted about 1 month ago

    @Mckaay Thanks for your feedback, I must have missed the text decoration. Regarding the image, it is the right one but the screenshot wasn’t updated. Thanks

    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