QR code component

Community feedback

• 

  Joanna Skrzypczak•530

  @joaskrPosted almost 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 :)

  0

  ---

  

  Mohammad Hossein Amirpanahi•390

  @mhap75Posted almost 2 years ago

  @joaskr Thank you so much for your help. It's so kind and thoughtful of you to help newbies learn html/css more effectively. 🙂

  0