Skip to content
Submitted almost 3 years ago

Responsive NFT Card using Flex-box

Shantanu Duttaā€¢30
@nlern
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

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,480
    @NaveenGumastePosted almost 3 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
    1
    Shantanu Duttaā€¢30
    @nlernPosted almost 3 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

    1
  • Daveā€¢5,295
    @dwhensonPosted almost 3 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
    1
    Shantanu Duttaā€¢30
    @nlernPosted almost 3 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

    0

Please log in to post a comment

Log in with GitHub

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