Assessment wanted for Fundamental CSS comprehension please

MDN Learn
#1

Good evening :slight_smile:

I attempted this assessment and my end result looks slightly similar to the required output but not exactly the same unfortunately. I believe the alignment is slightly off although I tried to follow the instructions as best I could. I also left all my sizes in px not in em, this is because I find ‘em’ as a sizing unit confusing and would rather stay with px for now.

Would appreciate somebody having a look over my CSS code and pointing me in the right direction on what I’ve done wrong and what I could improve on.

https://jsfiddle.net/8px5s7oL/5/

Thanks :smile:

#2

Hello @Ahmed1

Some hints:

  • You used this selector: .card header footer . This doesn’t select the header and the footer inside the .card . It would select a <footer> inside <header> inside .card . The correct selector is .card header, .card footer .
  • You used the adjacent sibling combinator (footer + p) several times. I think what you wanted to use is either the descendant combinator (footer p) or the child combinator (footer > p). I recommend reading Combinators | MDN to understand the difference and why your selector doesn’t work.
  • In this task 1em is just the font-size of the <html> element (10px). Therefore the correct selector from the first hint would be:
.card header, .card footer {
  height: 3em;
  padding: 1em;
}

I hope those hints help you to improve your code :blush:

Happy Coding!
Michael

1 Like
#3

Thanks, I managed to get this assessment working and it looks good now. But yeah I’ll be revisiting the combinators lesson because I don’t fully understand it.

Thank you for the tips :blush:

1 Like