Assessment wanted for Fundamental CSS comprehension (Nebojsa Vidovic)

MDN Learn
#1

Hello,

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.

https://drive.google.com/drive/folders/1e2F2UW0qg6DRI-6PHY9QA4pSNG7OFXVH

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.

Kind regards,

Nebojsa Vidovic

https://jsfiddle.net/nebojsavidovic01/vtLmod3y/


desktop
desktop1920×919 51.5 KB
laptop
laptop1920×888 68.8 KB
#2

Hi @nebojsavidovic01

Congratulations! All your CSS rules are correct.

I have just one remark. For line-height it’s recommended to use unitless numbers. For the reason why and an example see: https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#prefer_unitless_numbers_for_line-height_values

Have a nice weekend,
Michael

1 Like
#3

Hello @mikoMK

Awesome, and thank You for the advice!

Nebojsa

1 Like
#4

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.

#5

In the last rule there’s max-height: 100%; for the image. Is that what you mean?

I don’t think none is an allowed keyword for overflow. Did you mean hidden?