Skip to content
Submitted 12 months ago

Responsive product preview card component

Louai Khodary•350
@LouaiKhodary13
Preview site (opens in new tab)View code (opens in new tab)
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?

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

  • Rajaul Islam Ratul•1,250
    @ratul0407Posted 12 months ago

    @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
    Louai Khodary•350
    @LouaiKhodary13Posted 12 months ago

    @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

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