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

Responsive Product Preview Card

P

@danielzeljko

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?

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

P
josip-h 90

@josip-h

Posted

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

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