QR Code Component Challenge created with HTML and CSS

Hi, @DAJ350

I checked out your solution and have a few suggestions:

• You’re trying to center the card by using margin: 230.5px auto, but this isn’t the best approach. Different viewports (the visible area of a web page on a user’s screen) have varying sizes, and hardcoding 230.5px won’t adapt to those differences. There are more flexible methods available, which I’ll explain below. For now, I’d recommend removing that margin.
• Once you’ve removed the margin, you can center both the card and the attribution by using Flexbox. While there are multiple ways to achieve this, here’s a simple example using Flexbox on the body:

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* your styles below */
}

This will ensure everything is neatly centered across different viewport sizes.

• You should remove width: 100% from both the html and body elements, as they are block-level elements by default, which means they naturally take up the full width of their parent container. Additionally, remove height: 100% from both the html and body and instead apply min-height: 100vh to the body. This ensures that the body always covers at least the full height of the viewport, allowing for better vertical responsiveness without restricting the content height.
• Regarding your question about semantic HTML elements, your current markup is missing <header>, <main>, and <footer>. In your case, the card can be a <main> element, and the attribution can be a <footer> for clearer structure and better accessibility.

Hope this helps!

body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget about !!min-height!!. You can use grid instead of flex too.

section should become <main>

It's better to use classes for css (not id)

Hope you found this comment helpful :)

CSS Reset:

Use a modern CSS reset like:

• Andy Bell's Picocalc reset
• CSS Reset by Eric Meyer
• Normalize.css

Flexible Units: Instead of using fixed units (px), opt for:

1. rem (root em): relative to the root element's font size
2. em: relative to the parent element's font size
3. dvh (dynamic viewport height) and dvw (dynamic viewport width)
4. % (percentage): relative to the parent element's width or height 5 vw (viewport width) and vh (viewport height)
5. min(), max(), and clamp() functions for flexible sizing

Example Usage:"

1. width: clamp(20rem, 50%, 40rem) (sets width between 20rem and 40rem, with 50% max)
2. font-size: 1.5rem (sets font size relative to root element)
3. margin: 2em (sets margin relative to parent element)
4. height: 100dvh (sets height to 100% of viewport height)
5. max-width: 80vw (sets max width to 80% of viewport width)

Benefits:

1. Improved responsiveness
2. Better accessibility
3. Easier maintenance
4. Enhanced flexibility

By adopting these best practices, you'll create more maintainable, responsive, and accessible CSS code.