Submitted 10 months ago

Challenge five responsive product page

pure-css

Ilay Zeitlin•180

@Ilay-Ilay

A solution to the Product preview card component challenge

Preview Code

Solution retrospective

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

Swapping the display properties on mobile and desktop images. With flex-box, it leads to unexpected behavior, changing flex-direction on the media breakpoint seem to work.

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

I couldn't manage to make the image fit the content spacing, if I added height to the parent container on some breakpoints it started to overflow, when I was adding height only to the content the image would stop fitting the text content. Maybe this is because it is an isolated element, in the center of the screen.

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on Ilay Zeitlin's solution.

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