QR code component using basic HTML, CSS

Hello, your work looks great good job, as for your question about fixed width I had exactly the same approach on my end, I used margins and width with pixels but this was bad practice so I will write down what I learned from this solution:

HTML

• You can remove the class used for main element as it describes itself and can be used directly inside of CSS.
• I read that linking the font or any outsourced content inside HTML and you can do that by copying the google-font link provided for the font and then use it in CSS.

CSS

• You need to use max-width and define a rem number instead of fixed width.
• Remove all the margins as its also not ideal to measure distance.
• Change the grid type to column display and remove place content replace it with justify-content, align-item

I see more hard coded numbers and also absolute position is very bad in this first solution so if you don't want the footer showing up just use display:none.

Feel free to checkout the discord community it helped me a lot. Good luck :)

Hi. You're using a <main>, which many beginners tend to forget/be unaware of. And you have descriptive alt text. Well done. Here are some tips to make your solution better:

HTML:

• The text in the <footer> needs to be wrapped in a <p>.

CSS:

• It's common to use lowercase letters on Custom Properties.

• You can keep the place-content: center,. Even though many use Flexbox to center the card, it's also possible to do it using Grid, and it's actually 1 line less of code. However, height on the body should be min-height.

• Font-size should never be in px. Instead, use rem.

• Remove the fixed width on the card. You rarely want to set fixed dimensions, except for sometimes on icons. Do add a max-width in rem to prevent it from getting too big on larger screens.

• <img> should have max-width: 100% instead of width.

• Change the margin on the image to margin: 0 auto;.

• Add some padding on the .container to get the space between the image and the edge of the card.

• Put text-align: center; on the body. Then, all the text will inherit that value from their ancestor(body).

• Remove the position: absolute; on the footer. If you don't want that text to show, remove it from the HTML altogether.

• Remove the media query. In this challenge, there is no need for one.

Good luck!