four card feature section using css grid

Community feedback

• 

  T

  Grace•31,010

  @grace-snowPosted almost 4 years ago

  Hi, this looks nice you're just missing the border radius on the cards and using incorrect heading levels. The two lines at the top should be in a h1, then all the cards a h2. You can use classes and even classes on spans inside those meaningful tags for styling if you want, but it's important headings are in order (for SEO and assistive tech).

  Here's other suggestions that would make your solution a little more robust in terms of responsiveness. I hope it's helpful and makes sense!

  @media screen and (max-width: 1000px) {
    .landing {
      /* margin: 100px auto; */
    }
    .landing-grid {
      /* margin: 40px auto; */
      /* width: 90%; */
      padding: 1rem;
      max-width: 1000px;
    }
  }
  
  body {
    /* width: 100vw; */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .landing-text {
    /* margin: 20px auto; */
    /* width: 50%; */
    padding: 20px 0;
    max-width: 600px; // or similar
    margin: auto;
  }
  
  // not a good way to center things - removes from document flow
  .landing {
    /* position: absolute; */
    /* top: 50%; */
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
  }
  
  .landing-grid {
    max-width: 1000px;
  }
  

  best of luck with your front end coding 😃

  1
• 

  Iyanu Elijah Egbuwalo•145

  @enigmirePosted almost 4 years ago

  Thank you so much, Grace. I will see to it and make those changes you suggested.

  Thanks

  0