Submitted about 1 month ago

Product Preview Card project

Sean H• 90

@Sean-LH

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

What are you most proud of, and what would you do differently next time?

I'm most proud of 3 things. 1. Finishing or at least completing this project. I know it's a small one, but it has been a while since I've completed something here. 2. How good the spacing is for the elements. 3. Implementing some functionality with react and typescript in my button element.

Next time, I will consider both the mobile and laptop screens when deciding how to establish components.

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

My biggest challenge had been the positioning for the main card, and how to space the elements within the card. I took my time looking for helpful resources and videos about positioning and spacing.

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

I'm not 100% sure if my spacing is exactly like the example given, so I am open to hearing about that. Specifically, the section that has item details.

Community feedback

Rastislav Hepner• 180

@raswonders

Posted about 1 month ago

Hi @Sean-LH,

congrats on finishing this solution! I like you approach regarding, responsiveness of an image, it works great here.

Overall solution looks good on desktop but it falls short on extra wide displays or when I'm resizing from mobile to tablet. I think main culprit here is that you've decided to use absolute positioning as layout building tool. There are much better alternatives like a flexbox or grid. With flexbox page container you can easily control positioning of your card across devices of all sizes. You can also add some margin so there is breath room around the card on small devices.

Hope i made a sense and it gave you right idea Cheers

Marked as helpful

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