Help: Fundamental CSS Comprehension

I’m doing the fundamental CSS comprehension and my card has turned out to be a bit funky. I need corrections to line up the corners and adjust the sizing of the main card content properly.

Hi @Ry4nW and welcome to the community :wave:

Indeed and it’s cool when you do some own customization :grin:

To improve the border there are two thing you could do:

  • The reason the outer borders don’t match is that the border and the header/footer don’t have the same origin for the radius. You could see this problem better when you increase the card border to let’s say border: 2em solid darkslategrey;. To make it look better we could decrease the border radius of the header and footer to for example 0.7em.

  • Put the border-radius properties inside header and footer separately and only define the outer borders.

  • Example for the header:

    border-radius: 0.7em 0.7em 0 0;

To improve the height issues you need to do the following:

  • Remove the padding from the article
  • Add a bit of padding to <p> inside the article (e. g. 1em)
  • Decrease the height of the whole card (I think 26em would work)

I hope that helps! Feel free to ask questions.

For future exercise (or if you like to show an improved version of this exercise) it would be great if you could put your work on an online editor like CodePen. This way we can see the end result and are able to experiment with possible improvements. Would be much easier for us. :blush:

Have a nice weekend,

1 Like