Skip to content
Submitted almost 2 years ago

NFT preview card with flexBox

Dolly-Pee•140
@Dolly-Pee
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Please go through my code and highlight areas i can improve on..

kinda having problem with using 100vh height on pages that takes more than the view-port page without scrolling

Code

Please log in to post a comment

Log in

Community feedback

  • Pablo•550
    @ackDeckard

    Almost there Dolly-Pee 👏

    Two suggestions:

    a) Use grid or flex to align items at the center of the screen. For example with grid you'll need to add this to your <main>

    display: grid; justify-items: center; align-items: center;

    b) Move your divs to their own <section>.

    <main style="display: grid;justify-items: center;align-items: center;"> <section>

    <div class="card container"> .... </div>

    <div class="attribution"> .... </div>

    </section>

    </main>

    With these suggestions you'll have everything in the center.

    Marked as helpful

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