I would like assessment of my work for the Fundamental CSS comprehension assignment.
My code can be found at the jsfiddle link below and I have added the link to the assignment page as well.
Also, I used my own image and information for the content of the card, and have included a link to a google drive folder containing the image.
Besides this I have attached two screenshots of how the page renders on my computer and laptop, since on the laptop it renders the footer in one line and for some reason on my desktop computer there isn’t enough space in the line of the footer, and it moves the last word to a new line. If I set the font-size to 1.49em instead of 1.5em it renders it in one line. Just wanted to double check if this is just how it renders on each device, or is it something related to my code.
You shoud add max-height to the image element (if the image is not readed, it restricts the long alt text).
The text is longer on one computer because of different fonts. You can prevent overflow by overflow:none; or by removing height from footer and .card elements (or at least use min-height).
I dont know why you didnt use initial-scale=1 in viewport meta tag, but I guess you have your reasons.
And last, but not least, rem are usually better units than em.