Submitted 5 months ago

Responsive Product Preview Card

Daniel Zeljko•50

@danielzeljko

Preview site View code

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?

There's nothing I'm particularly proud of as it's such a simple component.

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

I ran into issues where setting a fixed height on project-card would cause the checkout button to overlap with the bottom margin. So, instead of having 32px (desktop padding) all around the project-card__body the actual bottom padding would be something like 15pxs.

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

How do we get the project card to have a fixed height without breaking the padding around the project card?

Community feedback

josip-h•90
@josip-hPosted 4 months ago
Hi Daniel Zeljko,

Congratulations on completing the project. I appreciate how clean and modular your CSS code is. I noticed that you used the <picture> element to load different image resources for desktop and mobile versions based on the screen size. Coincidentally, I was introduced to this method just yesterday through feedback on my solution.

In the solution screenshot of the desktop version of the component, the picture and text containers equally divide the card component, but this isn't the case in your solution. To fix this, I suggest adding the box-sizing property with the value border-box to all elements, and then setting the widths of the picture and text components to 50% for the desktop version of the component. This should resolve the issue.
0

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