Submitted over 2 years ago

Nft Card Component

Suatcan• 50

@suatcg

Preview site View code

This is a solution for...

NFT preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I've been trying to put the left side to .author div element but I could not via flex-box. I supposed it has to work but it is centered on the card component.

Meanwhile, I didn't add to media querries out of it works responsively correct likewise I expected. I believe works due to accommodating the center of the body. If you look at it. I would be appreciated. then you could give your advice.

The last thing I would like to say, I will add a hover state later. I haven't done it yet.

Community feedback

Nakoya Wilson• 1,530

@nakoyawilson

Posted over 2 years ago

If you add align-self: flex-start to the .author div the content should align to the left.

.author {
  display: flex;
  align-items: center;
  align-self: flex-start;
}

Marked as helpful

Suatcan• 50

@suatcg

Posted over 2 years ago

@nakoyawilson thank you so much for your support, that worked :D. I considered, flex item initially, which should have been started out of the start. For that reason. I thought that is a different problem that I've encountered.

Nakoya Wilson• 1,530

@nakoyawilson

Posted over 2 years ago

@suatcg You're welcome!

jul_julham• 210

@zulhamsy

Posted over 2 years ago

great work!, its so close to original design! I've some notes for you :D

I think banner-image's height is a little bit shorter, it will be nice if you could increase it a little
price info (0.041 ETH) should be a little bolder, I think its semibold (600 Weight) or so
for 'author' section, I think you could use 'justify-self: start' for avatar image or 'justify-content: start' in author container, hope it helps

btw it still great work! keep it up!

Marked as helpful

Suatcan• 50

@suatcg

Posted over 2 years ago

@zulhamsy Thank you for your help, though, the justify-content manner did not work, as you expected. But, I found out the solution. I should have been include to 'align-self: start property. Besides, I will add your other suggestion as well, you can check later.

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