html, css, flexbox

Community feedback

• 

  sgarcialaguna•180

  @sgarcialagunaPosted over 1 year ago

  Easiest way to center:

  .container {
     display: grid;
     place-items: center;
  }
  

  Then remove all the stuff with absolute positioning, negative margins etc.

  You can also use 100vh to have your container use the available viewport height. If you get a scrollbar, it's because default browser styles add a margin on the body. Explicitly remove it with body { margin: 0 }. There is some nuance to 100vh, see Kevin Powell, but it is better than using pixel values.

  As a general matter, try to avoid setting fixed "magic" pixel widths and height on your card / container. Instead, let the content define the card sizes.

  Marked as helpful

  0

  ---

  

  Tom Kelly•40

  @tom-kelly9Posted over 1 year ago

  This helps a lot thank you@sgarcialaguna

  0