QR code component

Community feedback

• 

  Joanna Skrzypczak•510

  @joaskr

  Posted over 2 years ago

  Hi,

  good job with the challenge! Here are some small tips if you want to improve your solution:

  • If you want to get rid of the accessibility issue you can replace <p>Improve your...</p> with a <h1>. It is considered a good practice to use the main header on a page.
  • Because you are using margin: 10rem auto; your content is centred but it's causing a scroll on smaller screens because the content is too big for it - because of the margin. You can fix that and easily center the div with flexbox. To do that you have to:

  1. Remove margin: 10rem auto; from .container and remove margin: 0 auto; from .card
  2. In .container add the following properties: min-height: 100vh; /*sets the content height to the full size of the screen but will expand when content is bigger */ display: flex; justify-content: center; align-items: center

  Generally using flexbox or grid to center a div is considered to be the best way to center a div.

  Let me know if you have any questions and good luck with future challenges :)

  01