Skip to content
Submitted almost 3 years ago

NFT preview card component

Meshach Aderele•40
@CMconsults
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

  1. The elements within my card is inheriting the background color of the body instead of having the background color of the card. I need help on how to fix that.

  2. I would love to know the best way to center my card on the screen. I don't think the way I did it here is the best.

Community feedback

  • Travolgi 🍕•31,400
    @denieldenPosted almost 3 years ago

    Hi Meshach, congrats on completing the challenge!

    1. The elements inheriting the background color of the body because you have assign at all element. Assign it only to body:
    change the follow * with body
* {    
  background-color: #0d192b;
  font-family: 'Outfit', sans-serif;
}
    1. The best way to center the card is give flexbox and height properties to the body and remove all margin from container class. Note: Flexbox aligns to the size of the parent container. Read the guide -> Flexbox

    You can use the vh measurement for the height... Viewport Height handles the sizing of an element in relation to the height of the browser window.

    Keep it up and Happy coding!

    Marked as helpful
    0
  • Mushfiq Rahman•300
    @Ayon95Posted almost 3 years ago

    Hi, good job on the solution. The problem with background color is happening because you used the universal selector (*) to select all elements and set a background color for them. Instead of doing that, set the main background color on the body element only.

    body {
  background-color: hsl(217, 54%, 11%);
}

    You can use flexbox to center the card within the body element.

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

    By the way, you can get rid of some of the accessibility issues by specifying alt text for the images, and using semantic HTML elements like <main>, <article>, <footer>, <ul>, and <li>.

    <body>
  <main>
    <article class="card">
       .... (html code here)
      <ul class="currency-area">
        <li class="currency-area-1>
        </li>
        <li class="currency-area-1>
        </li>
      </ul>
      <footer class="creator-info">
      </footer>
    </article>
  </main>
</body>
    Marked as helpful
    0
  • Javed•200
    @Ofcl-JavedPosted almost 3 years ago

    Use display grid/flex to the body or parent element of card and then give place-items: center or place-content: center to the container if you used display grid, else use align-items/content: center and justify-item/content: center for container if you give display flex

    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