qr-code page / css positioning/relative/absolute/fixed

Community feedback

• 

  Joao Antonio Mendonca•70

  @mendoncajoaoPosted over 2 years ago

  Hi Michelle.

  Your result looks good, but the code is a little bit messy.

  If you don´t want to use grid or flexbox to center that object, you can use transform and position absolute.

  Inside the style file, all you need to center the card is:

  body {
      margin: 0;
      padding: 0;
      background: hsl(212, 45%, 89%);
  }
  
  .card {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: 470px;
      width: 310px;
      background: white;
      border-radius: 15px;
  }
  

  This works as the BODY tag is already doing the work for your .qr-card class.

  The way this works is explained very well in this site: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

  I hope this helps you.

  Keep on coding!

  3

  ---

  

  Andrew•90

  @L1m1tzPosted over 2 years ago

  Yello Michelle & @mendoncajoao To add on to the css stuff This be just a small video that helped me understand positioning better

  https://www.youtube.com/watch?v=jx5jmI0UlXU

  2

  

  Michelle Monrreal•40

  @MichelleMonrrealPosted over 2 years ago

  @mendoncajoao Thanks so much! Not familiar with transform but I’m defiantly going to look into it!

  1

  

  Michelle Monrreal•40

  @MichelleMonrrealPosted over 2 years ago

  @L1m1tz Thanks so much!

  0