Submitted about 2 years ago

Responsive NFT Card using flexbox

Michael• 70

@PowerCreation

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

I could not figure out how to get rid of the small overflow image hover effect. Any feedback is welcome. Have a great day!

Community feedback

Akash Singh• 60

@akash-singh95

Posted about 2 years ago

Hi Michael. Your design looks great, sizing and margins all look so refreshing. As for the overflow, try defining your images as display: block; that should resolve it.It's a common issue with images (or any inline elements)

Marked as helpful

Prantik• 660

@prantiknoor

Posted about 2 years ago

@akash-singh95 Something new I learned. Thank you. I could solve this problem by using display: grid/flex; on .img-container. But I didn't know why it was happening.

Suraj Raju Hadage• 690

@SurajHadage

Posted about 2 years ago

I would recommend

Whenever making single component design like this, always make them inside a <main> tag.
To know accurate dimensions of designs, use Paint.
Instead using <div> as an image container use <figure> tag, That would be more accessible & don't use <div> for view. Just give it a class & display block.
I would recommend to not upload unnecessary folders & files to save server space. Happy Coding

Marked as helpful

Michael• 70

@PowerCreation

Posted about 2 years ago

@SurajHadage I didn't know about Paint, thank you for your feedback! edit: I cant figure out how to get the dimensions of designs using Paint. Are there any guides that can help me ?

Suraj Raju Hadage• 690

@SurajHadage

Posted about 2 years ago

@PowerCreation Make sure we are talking about same app Paint

Top left side you can see view option, Click and you will see some option, unable ruler and status bar by clicking on it.

At the bottom you will see status bar showing dimensions. And ruler on top & left hand side.

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