Help needed: Fundamental CSS Comprehension

Help! Chris Mill’s image is overlapping the footer! And the footer needs to stick to the bottom of the card.

Reference: Fundamental CSS Comprehension
My code in Glitch : business card

To fit your image, you first need to have a look at your .card article img selector: .card article img { max-width: 100%; float: right; }

The task says “Float the image to the right… and give it a max-height of 100%”, so change that max-width to max-height.
.card article img { max-height: 100%; float: right; }

Secondly, it seems that at the bottom of the Mozilla doc it says that the html documents font-size should be 10px whereas yours is 15px. This would explain why the footer doesn’t line up; the header, article and footer all have fixed heights (50px, 120px, 50px respectively) which means the entire card should be 220px in height.
Your entire card is defined with a height of 22em, but since you have a font-size of 15px, your card is actually too big - at 330px.
Since you have been using 15px as your em unit when working out heights, such as for the header and footer, your values that are in em units need adjusting to reflect the new font size.

I’ve made the adjustments here: https://glitch.com/~fancy-spot-bunny

Let me know if you need any more help :slight_smile:

1 Like