3-Column-preview-card-component

Community feedback

• 

  hitmorecode•6,360

  @hitmorecodePosted 9 months ago

  Well done. I took a look at your page and there are a few things that you can/must fix for the page to look good.

  • Remove max-width: max-width: var(--max-width); on the body. By default the body's width is always 100%.
  • Add min-height: 100vh on the body, for the body to fill the screen.
  • If you are not too familiar with CSS Grid* you can start with flexbox. Here is a link to a good tutorial The Ultimate CSS3 Flexbox Tutorial - Colt's Code Camp
  • When writing CSS try to follow the DRY rule (Don't Repeat Yourself)

  .grid-1{
      background-color: var(--primary-color);
      height: 80vh;
      padding: 30px;
      width: 22vw;
      border-radius: 10px 0 0 10px;
  }
  .grid-2{
      background-color: var(--secondary-color);
      height: 80vh;
      padding: 30px;
      width: 22vw;
  }
  .grid-3{
      background-color: var(--dark-color);
      height: 80vh;
      padding: 30px;
      width: 22vw;
      border-radius: 0 10px 10px 0;
      
  }
  

  Here you have three that are being repeated three times height, padding and width. You can combine this into one CSS rule

  .grid-1, 
  .grid-2, 
  .grid-3 {
      height: 80vh;
      padding: 30px;
      width: 22vw;
  }
  
  .grid-1{
      background-color: var(--primary-color);
      border-radius: 10px 0 0 10px;
  }
  .grid-2{
      background-color: var(--secondary-color);
  }
  .grid-3{
      background-color: var(--dark-color);
      border-radius: 0 10px 10px 0;
  }
  

  Don't use vh or vw for card heights and widths this will complicate things. Use fixed dimensions instead (rem, px, em)

  See with this comments you can fix your page. If not feel free to ask Keep it up

  1