Submitted over 2 years ago

Responsive NFT Card using Flex-box

Shantanu Dutta• 30

@nlern

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

While developing the overlay for the image hover I noticed that the image container height is 5px more than the containing image height, so the overlay looked a bit stretched than the image on the bottom. I fixed this my setting overlay height calc(100% -5px). Why did this happen? I developed the project on MS Chromium Edge. Is it issue with the browser?

Community feedback

Naveen Gumaste• 10,460

@NaveenGumaste

Posted over 2 years ago

Hay ! Shantanu Good Job on challenge

These below mentioned tricks will help you remove any Accessibility Issues

-> Always use h1 first and then h2, h3and so on

-> Learn more on accessibility issues

If this comment helps you then pls mark it as helpful!

Have a good day and keep coding 👍!

Marked as helpful

Shantanu Dutta• 30

@nlern

Posted over 2 years ago

@Crazimonk Thanks for the helpful tips and the nice article! For now I have fixed the HTML issue by replacing the section tag with div tag.

Good day to you as well!

Cheers Shantanu

Dave• 5,245

@dwhenson

Posted over 2 years ago

Hi @nlern.

The issue comes down to img elements being having a display property of inline by default. One of the funky things about this is that it adds a bit of white space to the bottom of the image, which would have originally been to separate them from the adjacent inline element.

If you set both your images to have display:block you should find that this fixes the issue. I would typically add that setting along with max-width: 100% and height: auto to my CSS reset, this makes images much better to work with in general, and avoids this kind of issue.

I think everyone has to get bitten by this bug at least once!

Hope this helps

Cheers Dave

Marked as helpful

Shantanu Dutta• 30

@nlern

Posted over 2 years ago

@dwhenson Thanks for the clear explanation and solution! I have updated the image CSS applying the display:block styles and it worked.

Cheers! Shantanu

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