Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

NFT preview card with flexBox

Dolly-Pee 140

@Dolly-Pee

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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

Community feedback

Pablo 550

@ackDeckard

Posted

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

0

Please log in to post a comment

Log in with GitHub
Discord logo

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