Baby's first QR component

Community feedback

• 

  Moises Salazar•70

  @rtlsalazarPosted about 1 year ago

  Hi Corina! , The tiny scroll is due to the default 8px margin on the body element; this is included by the browser and has to be manually set to 0px, with: "body{margin: 0;}". By doing that, the scroll disappears. To avoid this kind of problem, it is very common practice to include a "reset.css" file (https://meyerweb.com/eric/tools/css/reset/) that automatically removes the default styles from the browser (including the margins), letting you decide for it.

  Marked as helpful

  2

  ---

  

  Corina•30

  @DangerinaPosted about 1 year ago

  Awesome! Thank you! I'll use a reset going forward. @rtlsalazar

  0
• 

  Kaik Code•70

  @SoberanoCodePosted about 1 year ago

  There is no need to include "height" in the body's syntax. I sincerely hope that I was able to assist you.

  1

  ---

  

  Corina•30

  @DangerinaPosted about 1 year ago

  If I remove the body's height, then my card doesn't sit in the center of the screen vertically. I think it's because I'm using flexbox maybe? @SoberanoCode

  0

  

  Kaik Code•70

  @SoberanoCodePosted about 1 year ago

  In the body, you can use "margin-top: 5%" and start CSS with: (*) { margin: 0; padding:0; box-sizing:border-box; } for global settings

  Marked as helpful

  1

  

  matias•400

  @strikes7Posted about 1 year ago

  @Dangerina it's better to set min-height: to 100vh (viewport height ) to allow the body to grow in case there are more elements, and a quick way to center an element is set in the parent display: flex; align-items: center; justify-content: center;

  Marked as helpful

  1