Skip to content
Submitted over 1 year ago

nft-preview-card

Igor•230
@MIU-cz
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

doesn't working @import (fonts) can't understand why???

Community feedback

  • Igor•230
    @MIU-czPosted over 1 year ago

    and why in brouser padding-top - working correctly, but on the screenshot not?

    0
    Igor•230
    @MIU-czPosted over 1 year ago

    please help to understood

    0
    Goran Malić•260
    @floatingPebblePosted over 1 year ago

    @MIU-cz

    Hey Igor. I am not an expert by any means, but I can try to help.

    Using fixed values like px may be a bad idea in this case as it may be too much or too little depending on the size of the screen it's being viewed on. It lacks responsiveness. I wouldn't use padding to center it, instead try adding display: flex, justify-content: center, and align-items: center to the first parent container that covers the whole screen height(height: 100lvh).

    Not sure about the @import issue but it looks like you solved it. Did you try linking fonts in the <head> section of your index.html?

    Also, I think there is no point in assigning role="main" to your main tag as it is the same as <main> or <div role="main">, so you can use just <main>.

    Finally, you can use a <figure> tag to wrap img instead of a generic <div> tag in order to produce semantically clean code.

    Cheers, and happy coding!

    Marked as helpful
    0
    Igor•230
    @MIU-czPosted over 1 year ago

    @floatingPebble when i add a <figure> my whole div will slide down))

    0
    Goran Malić•260
    @floatingPebblePosted over 1 year ago

    @MIU-cz

    <figure> is essentially the same as <div>. Leave the class on:

    <div class="content-img"> -> <figure class="content-img">. And replace the closing tag as well.

    Marked as helpful
    1

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