QR code image with HTML & CSS

Hey! You can remove the padding of 500px in your body. Then use Flexbox on the body to better center the card horizontally and vertically:

display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100svh;

Also, don't forget to add a box-shadow to the main container and change the border-radius to 20 so it looks less angular :) Hope that helps!

Hi

There are some important things to learn from this challenge so I'll list them out one by one. Make sure you understand each and refactor before moving on to another challenge.

1. All content should be contained within landmarks. This needs a main to wrap the component and a footer for the attribution.
2. You don't actually need the center div at all. You can keep it if you like but it would be more usual to place the centering styles on the body in a single component demo like this.
3. Remove the repeating links in the html head. You only need one set of Google font links. These should be importing only the specific font families and weights you need.
4. The img does not need wrapping in a div. As a general rule try to keep the html as simple as possible.
5. This component has a heading so you must use a heading element. Using headings appropriately and in a sensible order is extremely important for accessibility and SEO. In this case because it is a single component not a full webpage I suggest using a h2.
6. Img elements must always have an alt attribute. As this is important content the description needs to say what the image is (QR code) and where it goes (to FrontendMentor.io).
7. Make sure you update the link to you in the attribution. Perhaps to your frontend mentor profile page or to your github page.
8. Get into the habit now of always 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.
9. The image should not have a width or height in this. All it needs is width or max-width 100% (that is included in css resets). It can optionally have an aspect-ratio of 1 as this is a square image and that helps the browser performance.
10. As others have said remove the huge paddings and margins in this. Use flexbox to center the component in the viewport as others have advised. Alarm bells should ring whenever you're tempted to add a huge margin or padding — try to pause and question your approach whenever you consider doing that as there will almost always be a better way.
11. The component must not have a width. Only a max-width in rem. This allows it to grow up until a set limit, while also allowing it to shrink narrower when needed (like on smaller screens). Using rem means the layout will work for all users including those who have a different text size.
12. Remove all other widths in this. They are unnecessary, cause bugs and make the solution less robust.
13. Either the body will need a little padding or the component will need a little margin to stop the content ever touching the screen edges.
14. The component should have a little padding on all sides. (I expect because this is missing that's why you've wanted to set width on each child element.)
15. Never set font size in px. This is really important. Use rem.

Overall your whole solution looks very small. So when you remove widths and add the max width see if you can get that to be closer to the original design.

Hi there! Your site and code look great!

Your CSS looks pretty solid and is pretty clear and concise. Though a change I'd suggest is that you use flexbox to center your card instead of giving your card margin-top: 250px;. You can do something along the lines of:

body{
   width: 100vw;
   height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   overflow: hidden;
}

The attribution may interfere with your centering so you could just use this to get it out of the way:

position: absolute;
bottom: 0px;

Hope you find this feedback useful 👍