As well as the feedback above to enclose all this in a main landmark (which you still need to apply) there are other important changes needed in this. These are foundational learnings/principles/thinking that you'll need to apply in every challenge.
- all content should be contained within landmarks. This should live inside a
main, and every page you ever make needs one main. - the image is the most important content on the page but you've treated it as a decorative image. This needs an alt description to say what it is (QR code) and where it goes (to FrontendMentor.io).
- 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.
- to center the component on the screen use flex properties and min-height 100svh on the body.
- this card must not have a width, and definitely not in px. Instead, give it a max width in rem. This allows it to shrink narrower when needed (like on small screens) but doesn't let it grow too wide. It's important to use rem for that max width so the layout scales correctly for all users, including those with a different text size setting.
- the image doesn't need a width either. Besides the border radius all the img needs is the styles usually included in a css reset:
display: block; max-width: 100%; - Font size must never be in px. Use rem.
Make sure you apply these learnings in this challenge and the other one you've done. Then that next one will need further changes/feedback after all this.
This is why it's important to get or read feedback on the current challenge and refactor your solution to apply what you learn before moving on.
Marked as helpful
0
