Submitted almost 3 years ago

NFT Card component with Flexbox

Dom B• 190

@dombrga

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

NFT preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello. Here is my solution. It will be very helpful to me for any feedback.

I put the attribution at the bottom. I found it hard to center without having to add another height for the screen. I used position: absolute and right=left=0 but I did not understand it. (Please look at my "attribution" CSS class)

Thank you!

Community feedback

Gabriel Cavalheiro• 60

@gccavalheiro

Posted almost 3 years ago

Hello Dom, you can do it in an easy way using this way

<footer>
  <p>Text Here</p>
</footer>

footer {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 28px 0;
  text-align: center;
  line-height: 23px;
}

footer p {
  padding: 0 20px;
}

Marked as helpful

Dom B• 190

@dombrga

Posted almost 3 years ago

@gccavalheiro thank you very much! I found my own solution based on this.

Please log in to post a comment

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