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

Nostromitos four card feature

Nostromito 190

@Nostromito

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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 1,360

@huyphan2210

Posted

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

@Nostromito

Posted

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

1

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