QR code component

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  Replace <div class="box"> with the main tag and <h2> with <h1> to fix the accessibility issues. click here for more on web-accessibility and semantic html

  Every html must have <h1> to make it accessible. Always begin the heading of the html with <h1> tag wrap the sub-heading of <h1> in <h2> tag, wrap the sub-heading of <h2> in <h3> this continues until <h6>, never skip a level of a heading.

  Give h1 and p the same font-size of 15px which is 0.9375rem, text-align: center,the same margin-left, margin-right and margin-top values. Give p a margin bottom value.

  For a responsive content,

  • Replace the width of .box with max-width and the height with a padding value for all the sides.
  • Give the img a max-width of 100% and a border-radius value, the rest are not needed.

  To center .box using flexbox or grid instead of margin,

  • USING FLEXBOX: add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body

  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  • USING GRID: Add min-height:100vh; display: grid place-items: center to the body

  body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0
• 

  João Vitor•420

  @jvssvjPosted over 1 year ago

  Hello friend, I have some tips, in your HTML you can put all your content (main class = container). Create a div class = card /// Create a div just for the text /// Create a div for the qr-code

  In your CSS use display:grid for the center (center by container)

  • min-height:100vh
  • display: grid
  • place-items: center

  I recommend you do your css again, look for videos on YT about your doubts. Good Luck

  Marked as helpful

  0
• 

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  Hey there,

  very nice work!

  However i'd suggest an easier method and more flexible method for centering the card on the page, instead of using position absolute, use GRID or FLEXBOX like this e.g.:

  body { min-height: 100vh; display: grid; place-items: center; }

  Positioning absolute for big sections might cause issues when there are more elements on the page. It should usually be used for smaller elements like decoration image etc.

  You also don't need to use position absolute for the footer. Simply give it some margin-top.

  You can also use flexbox to center, and then give a flex-direction:column.

  Hope you find this feedback helpful!

  Marked as helpful

  0