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

@LouaiKhodary13

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?

Maybe start designing using the mobile approach

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

No challenges encountered

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

not a thing

Community feedback

@ratul0407

Posted

@LouaiKhodary13 congrats on completing this challenge🎉🎉

You've done a really great job👍🚀. Answering to your question, The issue of border radius on .item-1 is not only limited on mobile screens it occurs for all screen sizes smaller than 1440px. And the reason is on your .container you've set a background-color: white. So the .item-1 has inherited the background and because of the border-radius the content has shrink so it's visible.

Just remove the background: white from the .container and add it to the .item-2;

I hope it was helpful for you👍👍

Have a very nice day and happy coding😄

Marked as helpful

0

@LouaiKhodary13

Posted

@ratul0407 Thanks for the advice, I'm going to try that on my solution

1

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