Skip to content
Submitted 5 months ago

four card components

nekefer•200
@nekefer
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?

I am proud of how I use display grid.

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

I struggle with postion of body and his height.

Community feedback

  • Daniel•260
    @FlashdanielPosted 5 months ago

    Nice work. But I like to point out that you worked harder in your CSS.

    1. There was no need for position property in your CSS code. body was already properly positioned by the browser. Your struggle was as a result of the position: absolute.

    2. Learn to make proper use of inherited properties in CSS, for less code and avoid duplication.

    3. You can learn to make proper use of responsive units (like em, rem, %) in font-size, padding, width and margin. It helps to keep your site responsive if Users chose to resize their browser windows or change browser font size

    You can apply full height to the <body> by doing this

    body {
  height: 100vh;
}

    Or

    html {
  height: 100%;
}
body {
 height: 100%;
}
    Marked as helpful
    0
    nekefer•200
    @nekeferPosted 5 months ago

    @Flashdaniel thanks

    0

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