QR Code Component Using CSS Flexbox

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  specify the following the body: body{ display: flex; justify-content: center; align-items: center; min-height: 100vh } or body{ min-height: 100vh display: grid; place-items: center;} this should help you with that. There is no need for wrapper div in the html Put the text content in a div and give it a class. In the css file give the class of the text content a padding top and bottom value. Give the img a max-width: 100% instead of resizing it . Use rem or em as unit for you padding and margin values Hope am helpful. Happy coding.

  Marked as helpful

  0
• 

  tan•640

  @tan911Posted almost 2 years ago

  Hello @toshihikotani, maybe this will help and improve your code:

  • Try to wrap your div element with "main" element for accessibility purposes and It's best practices that your page contain a main element.
  • use "h1" instead of "h2"
  • your concern about centering a div content, try to apply flexbox in you body element

  Hope it helps, Thanks.

  Marked as helpful

  0

  ---

  

  Toshihiko S. Tani•160

  @toshihikotaniPosted almost 2 years ago

  Hi, @tan911

  Thanks for your help.

  0
• 

  Cats-n-coffee•670

  @Cats-n-coffeePosted almost 2 years ago

  Hi Toshihiko!

  Nice job! You're almost there centering your card. Since you already have the correct flex properties on #wrapper, all you need to do is make this same element take the full width of the screen. You might want to set min-width on your html and body elements as well. I would do 100vw since this card is expected to take the full screen, and your wrapper width: 100%.

  Hope this helps!

  Marked as helpful

  0

  ---

  

  Toshihiko S. Tani•160

  @toshihikotaniPosted almost 2 years ago

  Hi @Cats-n-coffee

  I'll take note of that. Thanks for your help.

  0
• 

  PadseFIAE•70

  @PadseFIAEPosted almost 2 years ago

  Hello Toshihiko, to center the content u could use Display Flex like this:

  body { display:flex; justify-content:center; align-items:center; height:100vh; }

  than the content should be centered :)

  Nice solution by the way. It looks close to the original.

  greetz Padse

  Marked as helpful

  0

  ---

  

  Toshihiko S. Tani•160

  @toshihikotaniPosted almost 2 years ago

  Hi, @PadseGaming

  I see. I'll take note of that. Thank you for your help.

  0