QR Code Component Challenge created with HTML and CSS

Community feedback

• 

  Huy Phan•2,300

  @huyphan2210Posted 2 months ago

  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!

  Marked as helpful

  1
• 

  Svitlana Suslenkova•5,360

  @SvitlanaSuslenkovaPosted 2 months ago

  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 :)

  Marked as helpful

  1
• 

  P

  Mohamed Kabba•220

  @Mohamedkabba444Posted 2 months ago

  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.

  Marked as helpful

  1