Desktop QR Code solution using css

Community feedback

• 

  Francesco Merighi•930

  @francescomerighi1202Posted over 1 year ago

  There are a few tweaks to do on this solution.

  The first is that you can make your life a lot easier by using flexbox or grid to perfectly center elements on the page.

  Then, remove that .container, it's one class too many, use body as your parent container, set the .card to a max-width and width of 80-90% so it won't become tiny when viewing the page on mobile.

  Hope I was helpful! (If so, please mark this comment as helpful)

  In any case, don't hesitate to look at my solution if you need to ;)

  Marked as helpful

  1

  ---

  

  Clinged1•80

  @Clinged1Posted about 1 year ago

  @francescomerighi1202 alright, thanks for the advice

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  Replace <h2> with <h1> to make the content accessible.

  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.

  To center .container on the page using flexbox only instead of flexbox and margin, add justify-content: center to the body and remove the margin value in .container.

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

  Giv .text a margin value for all the sides, text-align: center and a font-size of 15px which is 0.9375rem, this will be the font-size of both p and h1. Give p a margin-top or h1 a margin-bottom value for the space between the text.

  Increase the max-width of .container for it to be equivalent to the design max-width:320px which is 20rem and give . card a padding value for all the sides padding: 16px which is 1rem/em, a background-color of white and a border-radius value.

  Give the img a max-width of 100% and a border-radius value, the rest are not needed.

  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

  1