3 Column Preview using flex

Community feedback

• 

  hitmorecode•6,680

  @hitmorecodePosted over 1 year ago

  Congratulations well done. The card is not in the middle of the page you can fix this by adding min-height;

  html{
  font-size: 15px;
  background-color: hsl(0, 0%, 95%);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* add this line */
  }
  

  You can inherit some things from a parent, but if you want to use for example. the same color on a button as on a background. You can use CSS variables, with variables you declare everything before and can use them them in multiple places. If you ever need to change that variable, you can do it in one place only.

  This is how you set a variable

  :root {
  --primary-background-color: hsl(210, 20%, 33%);
  --font-weight-700: 700;
  }
  
  button {
  background-color: var(--primary-background-color);
  }
  
  p {
  font-weight: var(--font-weight-700);
  }
  ``
  

  Marked as helpful

  1