Oh dear. Have a look again at the starter files - you should see some very important stuff that needs to go in the html head. It will have a comment above a meta tag saying its essential you don't remove it. You need to put this back in so the site can be viewed on different sized screens. It's super important!
Once that's done there are some other bits to adjust. You'll need to do one by one in this order:
- all content should be contained within landmarks. That means you need to wrap this card in a
main
element. Look up what landmarks are in html though so you know about others you'll need in future. - inside that main landmark you only need one div for the card. (Make sure you are working off the figma file or design image not preview image in the starter files).
- it's great you've added some alt text on the image, but this just needs to be a little more descriptive. As well as saying what the image is (QR code) it also needs to say where it goes (to FrontendMentor.io).
- one of the paragraphs in this needs to be a heading element. It's important when viewing a design to consider what should be a heading and what level you should use. Because this is just a card component, not a full Web page, and this card would never be used to serve the main heading on a page, you know it can't be a
h1
. So use the next level of importance down from that - ah2
. - in the styles get into the habit straight away of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use. Make sure you read the blog with it and understand what the properties in the reset are doing.
- remove all the widths and heights from the styles. Then keep reading this...
- give the body a min-height of 100svh. By default the body is only as tall as it's content. But this property tells the browser you want the body to be at least as tall as the viewport (so you can center the card on the screen).
- all the card needs to size it is a max width in rem. No height, no width needed. You can give it a % width if you want like 100% but it's not necessary.
- the card will need padding on all sides. This can be in px.
- the image can't be align items center so remove that too (it's doing nothing).
- font size must always be in rem, and never in pixels. These font sizes are far too small too. Check the figma for the sizes and convert to rem before use in code.
Marked as helpful