Newbie challenge using generic HTM CSS to design a QR code scan page

Community feedback

• 

  Suraj Raju Hadage•670

  @SurajHadagePosted over 2 years ago

  I have suggestion to reduce your HTML code and make it more Semantic.

  • Wrap your card inside <main> tag.
  • Take a <figure> tag to wrap the <img> tag. use

    img {
      width: 100%;
      height: 100%;
  }
  

  • Then for heading <h1> and <p> for other text.
  • If you want make a design with not even flex and grid you can make it.
  • To center the <main> Use :

  main {
    position: absolute;
    top: 50%;
    left: 50%
    transform: translate(-50%. -50%);
  }
  

  Marked as helpful

  0
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Desmond, congratulations for your solution!

  Your solution its really good, instead of using margins to align you can use the display: flex approach, first you add flex to body and min-height: 100vh (here because the container will align to the parent height).

  Then you can delete the margins, put the background in the bodyinstead of container. For the alignment see the code below:

  body {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: hsl(212, 45%, 89%);
  }
  

  I hope it helps and happy coding!

  Marked as helpful

  0