QR Code Page Solution using HTML and Vanilla CSS

Community feedback

• 

  Ogulcan Yavuz•120

  @ogulcanyavuz00Posted over 1 year 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; }

  Marked as helpful

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year 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

  Marked as helpful

  0

  ---

  

  Koi Hastilow•90

  @KoiHastPosted over 1 year ago

  @Hassiai thank you so much for your advice! As I said, I’m pretty new to all this, so your help is greatly appreciated.

  On the topic of units, I’ve seen similar advice being given to others that have done this project. Is there some unspoken rule about not using px (or other absolute units) that I was unaware of, or is it just a personal preference thing that’s pretty common among developers?

  0