Frontend Mentor 3 Columns Preview Challenge using grid

Community feedback

• 

  hitmorecode•6,680

  @hitmorecodePosted over 1 year ago

  Just some small things you can change to fix some issues.

  body{
  font-size: var(--f-size);
  background-color: var(--Very-light-gray-bac-heading-buttons);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* change to this. 100% was breaking your page at small screen sizes */
  padding: 1.5rem;
  
  
  .mainCradSectionContainer{
  /*   width: 910px; */ /* remove this, it was breaking the page on small screen sizes */
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  }
  
  @media screen  and (max-width:880px) {
  /* html{
  height: 235vh;
  } remove this from the media query */
  
  /* add this to the media query */
  .mainCradSectionContainer {
  grid-template-columns: 280px;
  grid-template-rows: repeat(3, 1fr);
  }
  

  Well done, keep it going

  Marked as helpful

  0

  ---

  

  Muhammad Muzzammil•350

  @mk-muzzammilPosted over 1 year ago

  @hitmorecode thanks buddy i have tried percent(100%) instead of 100vh but it still not working at that time can you please guide me more about it i appreciate your response buddy thank you

  0

  

  hitmorecode•6,680

  @hitmorecodePosted over 1 year ago

  @MK-Muzzammil sorry what I wrote it's a bit confusing. What I mean is remove height: 100%; and change it to min-height: 100vh;

  0