QR Code Page Solution using HTML and Vanilla CSS

Community feedback

• 

  Ogulcan Yavuz•120

  @ogulcanyavuz00

  Posted over 2 years ago

  I am new in this stuff, but here we go!

  A great looking product. It looks almost identical. Still, you can fix two minor problems about the color property. Try to give your h1 and p elements these values:

  • h1 { color: hsl(218, 44%, 22%); }
  • p { color: hsl(220, 15%, 55%); } This would make reading easier.

  About centering your div, I guess using either flex or grid is the most modern way to apply. as your div.container (or <div class="container">) is inside main, your main works as a flex container so you should work on that. I worked around your code and the method below worked for me.

  html { height: 100%; }

  body { height: 100%; }

  main { height: 100%; display: flex; justify-content: center; align-items: center; }

  00

  Marked as helpful
• 

  Hassia Issah•50,390

  @Hassiai

  Posted over 2 years ago

  There is no need to style the main, To center .container on the page using flexbox, add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body.

  To center .container on the page using flexbox:
  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  There is no need to give .container a margin and increase it padding value to 15px.

  For a responsive content, replace the width in .container and the img with a max-width. Give h1 and p the same font-size of 15px and the same margin-left, margin-right and margin-top values. Give p a margin bottom value.

  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

  01

  Marked as helpful