This has a few issues I can see.
- the img doesn't need wrapping in an extra div. Try to keep html as lean as possible.
- it's invalid to have
width="320px"
in html. That attribute doesn't accept units inside it. It also will damage performance having a width attribute without a height attribute on there as well. The only reason to have them is so that the browser knows the aspect ratio and can save the space for the image while it fetches it. - the image is the most important content on the page. It is definitely not decorative so must have a good alt description.
- get into the habit now of always including a full modern css reset at the start of the styles in every project. It's not strictly necessary in this tiny project except for the image reset part, but it's still good to get into the habit of including it every time.
- never limit the height of elements that contain text, including the body. Because this has been limited to a 100vh height, the background does not stretch beyond that and this looks broken on smaller mobiles, landscape mobiles and when people have a larger text size. Instead of height, use min-height so that the body can grow when it needs to.
- the component must not have a width, and this definitely shouldn't be in px. This is causing the component to touch the edges of my screen in portrait view and is making it extremely narrow when I enlarge my text size. Instead, set a single max width in rem on the component. That allows it grow up to that max width, but also shrink narrower when it needs to. And my using rem it means the layout will scale along with the users chosen base text size.
- Font size must never be in px.
- give the component a little margin on all sides, or a wrapping element (like body) a little padding on all sides. This will prevent the component from touching screen edges, which it should never do.
- has the footer been set as position absolute or something? I can't see that in the code but am seeing the footer overlap the card content in some views/zoom levels. That may also be being caused by the body having a limited height actually.
Marked as helpful