Skip to content
Submitted over 2 years ago

Product card centering a div

Priya Sundar s•10
@nicky1707
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

I got css property overrinding problem ( css property crossed out ) it took me some time to understand it. What is the best practice to avoid it.

Community feedback

  • faizan•2,420
    @afaiz-spacePosted over 2 years ago

    Hey @nicky1707, congratulation on completing the challenges.

    • remove margin-top: 10%; from the body element and add `min-height:100vh;, also add gap: 25px; in body element.
    • remove height: 400px; and align-items: center; from .container class.
    • remove margin-left: 30px; from content class.
    • also use *{ margin:0; padding:0; box-sizing: border-box; }
    0
  • Kelvin•770
    @githukelvinPosted over 2 years ago

    Hello there,

    you could just use margin:10rem auto;

    0

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