Skip to content
Submitted 2 months ago

Nostromitos four card feature

Nostromito•190
@Nostromito
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Figuring out css grid was exciting. Had to do some research in order to figure it out but I feel like now that I know it I won't forget it.

What challenges did you encounter, and how did you overcome them?

Not having an understanding of grid was a major handicap but after research I was able to get the project done.

What specific areas of your project would you like help with?

Any constructive criticism is more than welcome!

Community feedback

  • Huy Phan•2,300
    @huyphan2210Posted 2 months ago

    Hi, @Nostromito,

    I reviewed your solution and have a few suggestions:

    • On my 1920 x 1080 screen, the body doesn’t cover the entire viewport. To address this, you can use min-height: 100vh on the body. This ensures that the body always extends to at least the full height of the viewport, preventing it from being shorter than the screen height.
    • After applying min-height: 100vh, you can center the content within the body using CSS Grid. Set display: grid on the body and use place-items: center to center the content both horizontally and vertically. This approach simplifies centering and ensures that the content remains in the middle of the viewport. You can then remove the margin-top: 3% from the header, as the content will already be centered.

    Hope this helps!

    Marked as helpful
    0
    Nostromito•190
    @NostromitoPosted 2 months ago

    @huyphan2210 That answers a lot of questions. Thank you very much!

    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