@andreasremdt
Posted
Hey, congrats on solving the challenge :)
I checked your favicon, it's is used and displayed correctly, so no worries there.
In my opinion, your code is clean and understandable. One suggestion I have is to use the main
element for the container instead of a div
. This gives you accessibility benefits because every page is supposed to have one main landmark, here it's the card itself.
The media query is technically correct, but I don't think that you need one here. Instead, what you can do is setting max-width: 100%
on the image itself, which will make it responsive. You can even remove the width: 290px
. This way, the image grows and shrinks with the browser without the need to write any media queries. This is also a great way of making videos and other media responsive in CSS. Hope it helps :)
Marked as helpful
@cathleys
Posted
@andreasremdt Hello! sorry for the late reply! this is super helpful! Now I know why the image is not getting smaller or bigger when I adjust the browser size. max-width: 100% is the answer! thank you!