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

four card components

P
nekefer 200

@nekefer

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?

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 240

@Flashdaniel

Posted

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

P
nekefer 200

@nekefer

Posted

@Flashdaniel thanks

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