Submitted almost 3 years ago

NFT Card component with Flexbox

Dom B•190

@dombrga

Preview site View code

This is a solution for...NFT preview card component

HTML
CSS

1newbie

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

@gccavalheiroPosted 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

@dombrgaPosted 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