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 component

Ralph 190

@RalphPastel972

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?

If I had to start over, I would focus on the layout first and on the styling at the end, instead of doing all at the same time.

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

Using gap in the text sections created some weird issue whith the media query: While it was perfect with the "mobile diplay", there was a slice shift in the "desktop display".

I needed to use max-width: calc(100% + 10px); to compensate the shift.

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

n/a

Community feedback

Ralph 190

@RalphPastel972

Posted

Thank you @dakirzakaria,

Once again it is helpful and insightful!

I was thinking about using percentage. I should have tried it. Thanks.

I will correct this bad habit of nesting my h in div

"Rewrite this message in a different way or with a different concept as if you wrote it yourself." => I do not understand what you mean :-/ Could you elaborate please?

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