Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product Preview Card

P
Marcus 110

@marcus-hill

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

P
Mckaay 110

@Mckaay

Posted

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

P
Marcus 110

@marcus-hill

Posted

@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
Discord logo

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