Skip to content
Submitted almost 3 years ago

NFT preview card component training

ayhan•40
@ayhanbacili
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I couldn't center the box and have the picture inside the box. I got some help from the internet. Can someone explain this?

Community feedback

  • Anosha Ahmed•9,300
    @anoshaahmedPosted almost 3 years ago

    To get rid of the accessibility/HTML issues shown in your Report:

    • wrap everything in your body in <main> ... OR use semantic tags ... OR give role="" to the direct children of your <body> ... Click here to read more
    • have at least one <h1> in your code
    • <section> and <article> usually need a heading; so if you don't need a heading in it, use some other element such as <div>

    Great job! :)

    Marked as helpful
    1
  • Account deleted

    You can easily center it by adding flexbox to your body. It would be like this:-

    body { min-height: 100vh; display: flex; justify-content: center; align-items: center; }

    In this way you can center it.

    Marked as helpful
    1
  • Abdul Rahman Farachi•65
    @abdulrsfPosted almost 3 years ago

    To center a box, you could either use grid or flex then justify-content center and align the content center. In order to put the picture inside the box just make 2 divs, one is for the component itself, the other is for the body, the component div has the center and the body div has the background and all the other contents in it.

    Marked as helpful
    1
  • Adetola Ogundipe•60
    @tolaogundipePosted almost 3 years ago

    I just completed this challenge too. I was able to center the container by setting margin-left and margin-right to auto. Using display flex on the body and centering the contents of the body using justify and align content center works also like @abdulrsf pointed out. Welldone!

    Marked as helpful
    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