QR code component using Flexbox

Community feedback

• 

  Huy Phan•2,300

  @huyphan2210Posted 2 months ago

  Hi @rkeppler42,

  It looks like this is your first challenge, and you got the QR card 99% accurate to the design—congratulations!

  I do have a few suggestions:

  • You don’t need to add width: 100vw to the body because the body is already a block-level element, which naturally takes up the full width. Also, instead of setting height: 100vh, it’s better to use min-height: 100vh to avoid layout issues on smaller viewports (e.g., mobile browsers with dynamic address bars).
  • Consider using more semantic HTML instead of relying heavily on div elements. Semantic elements like article, section, or main provide better context for the content, improving accessibility.
  • While I don’t have access to the design file, your card looks nearly perfect. Keep in mind that the design may be optimized for specific devices, so it’s often the developer's job to make elements responsive. Rather than hardcoding width and height values, try using min-width/min-height or max-width/max-height with specific values, while keeping width/height relative (e.g., using percentages or vw/vh units).

  Hardcoded Width/Height (Not Recommended)

  .card {
    width: 320px;
    height: 499px;
  }
  

  Responsive Example (Recommended)

  .card {
    max-width: 320px;
    width: 90%; /* Relative width, adjusts based on the screen size */
    
    min-height: 499px;
  }
  

  Hope this helps!

  Marked as helpful

  1

  ---

  

  P

  Roberto Keppler•130

  @rkeppler42Posted 2 months ago

  @huyphan2210 thanks for your feedback! I really have to study responsiveness! I'm gonna take a deep dive!

  0
• 

  Hana Vargas•10

  @Hana094Posted 2 months ago

  it looks good, the only thing I wouls consider is looking at how you are making your comits, because your repo has a lot of wierd files that I think may not be of use, but I can deny that You got the desire result

  1