Single-price-grid-component

Community feedback

• 

  hitmorecode•6,360

  @hitmorecodePosted over 1 year ago

  You used position to place the card in the middle of the page. You could have done this with flexbox.

  body{
  width: 100%; /* you don't need this. the width of body is by default always 100% */
  min-height: 100vh; /* to make it good practice, try using min height instead */
  font-family: var(--Font-Family);
  background-color: var(--Light-Gray);
  font-size: var(--Font-size);
  /* add these lines to place the card in the middle of the page */
  display: flex;
  justify-content: center;
  align-items: center;
  }
  #card{
  /* you can remove these lines, flexbox on the body will do the same */
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  /* ############################# */
  background-color: white;
  border-radius: 10px;
  width: 720px;
  height: max-content;
  display: flex;
  flex-direction: column;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
  }
  
  /* if you change the breakpoint from 400px to 720px it will make a better transition from desktop to mobile */
  @media (max-width:720px) {
  body{
  /*         height: 100%; */
  }
  #card{
  /*         transform: translate(-50%,10%); */
  width: 90%;
  /*         padding: 0; */
  /*         margin-bottom: 5rem; */
  }
  .community{
  /*         width: 100%; */
  padding: 1.7rem ;
  }
  .bottom{
  flex-direction: column;
  /*         width: 100%; */
  /*         padding: 0; */
  }
  .subscription,.why_us{
  width: 100%;
  padding: 2rem;
  }
  .subscription{
  border-radius: 0;
  }
  .why_us{
  border-radius: 0 0 10px 10px;
  }
  .community > h2{
  font-size: 1.5rem;
  }
  .community > h3{
  font-size: 1.1rem;
  }
  /*     .community > p{
  width: 90%;
  } */
  }
  

  I've commented out thing that you don't need.

  Marked as helpful

  0