Responsive QR Code Component

Community feedback

• 

  Daniel 🛸•44,270

  @danielmrz-devPosted 8 months ago

  Hello @rugarcia25!

  Your solution looks excelent!

  I have just one suggestion:

  📌 To improve semantic clarity, opt for <h1> over <h2> for your main title.

  It's more than just text size — it's about structuring your content effectively:

  • <h1> to <h6> are used to define HTML headings, with <h1> being the most significant.
  • Stick to one <h1> per page for the main title, and maintain the titles hierarchy with <h1>, <h2> <h3>, and so on.

  While these adjustments might not alter the visual appearance much, they significantly enhance semantic clarity, SEO optimization, and accessibility.

  Hope this suggestion proves helpful! Keep up the great work!

  Marked as helpful

  1

  ---

  

  Ruben•250

  @rugarcia25Posted 8 months ago

  First of all, thanks for your time and help.

  I used H1 first, but i though that using H2 would fit better, i didn't stop to think on SEO.@danielmrz-dev

  1
• 

  Amirreza•270

  @AmirezaMahmoudiPosted 8 months ago

  Hello Ruben you missed "." when using css class selector that's why the background color didn't apply. and try to use border-radius for both your img element and main container

  Marked as helpful

  1
• 

  P

  Jake Godsall•1,390

  @jakegodsallPosted 8 months ago

  Hi 👋

  Great work on this component! 😁

  Just thought I'd add a few comments regarding responsivity. It is generally considered best practice to not set a height with absolute units on a container, and rather to let CSS to determine the height at run-time according to the content it contains.

  The reason for this is more apparent when it comes to more complicated components, where the content can be dynamic. When we set the height, we remove the flexibility that CSS provides by default, and this can lead to overflowing of content.

  A better approach is to use padding and margins to create the whitespace between the elements inside the container, and letting CSS therefore calculate the total height.

  Another responsivity trick is to use a percentage-based value for the width of the component. This allows the component to shrink with smaller viewports and not overflow the screen. A max-width can then be set for larger viewports to stop the component from spreading too far.

  In your example, this could be achieved with:

  .container {
      width: 90%;
      max-width: 400px;
  }
  

  This would solve the problem you have when the screen is smaller than 400px in width and the component does not fit in the viewport.

  Hope this helps 😁

  Marked as helpful

  0

  ---

  

  Ruben•250

  @rugarcia25Posted 8 months ago

  I really appreciate your comment, it helps a lot.

  I like to use the % to control better the responsivity but i dont have a "single way to work", sometimes i work with %, sometimes with px, sometimes with en/rem, i think i should work with the same structure to keep a singularity.

  Sorry for my english, isnt the best@jakegodsall

  0