CSS Flexbox, HTML Div, HTML Basic, Max Width, Hoverstate, Positioning

Community feedback

• 

  Elir-Mahad•100

  @Elir-Mahad

  Posted over 3 years ago

  Hey Yu i looked over your code !

  It looks clean and not clunky at all.

  In your website: https://selfreflective.github.io/NFT-preview-card-component/

  There seems to be a horizontal and vertical scroll.

  This probably because of the height and width in your body.

  I played around with the css and i made some changes to body, .ntf-card, .boxshadow

  Implement the below changes to the css classes and let me know what you think.

  I identified the css properties that i removed by putting them under 'removed css below' comment.

  I identified the css properties that i added by putting them under 'added css below' comment.

  body {
    text-align: center;
    background-color: hsl(217, 54%, 11%);
    margin: 0;
    font-family: Outfit;
    
  /* removed css below  */
  /* width: 1440px; */
  /*  height: 900px; */
    
  }
  
  .ntf-card {
    border-radius: 10px;
    background-color: hsl(216, 50%, 16%);
    width: 340px;
  /* remove css below  */
  /* position: relative; */
  /* margin: 200px auto; */
    
  /* Added css below   */
    display:block;
    margin:auto;
    margin-top:2rem;
  }
  
  .boxshadow {
    display: flex;
    height: 300px;
    width: 300px;
    justify-content: center;
    align-items: center;
    position: absolute;
    border-radius: 11px;
    display: flex;
    justify-content: center;
    background-color: hsl(178, 100%, 50%);
    
  /* removed css below  */
  /* margin-bottom: 47px; */
  /* bottom: 234px; */
    
  }
  

  Also it would be useful, when you are writing out your code, to avoid using position relative and absolute unless its absolutely necessary.

  Try using flexbox and margins to move around the page.

  Thoughts ?

  15

  Marked as helpful