3 column preview cards using CSS Grid

Community feedback

• Account deleted

  Hey @raf0411 🙂

  Just wonderful solution and Its really look like a pixel perfect solution that's why I checked your source code and there I found some common problems and you really easily can fix them

  • <h1> tag :

  Every page only need one <h1> tag because <h1> tag is for page title and every page only had one title.

  H1 tags help Google to understand the structure of a page. So if you're using H1s as Google recommends for your page title or content heading, your H1 is effectively telling Google “here's what my page is about.

  and in your solution you used <h1> tag for three time and there instead of <h1> tag you can use a <h2> tag.

  and you can use <h1> tag with a sr-only class

  <h1 class="sr-only">3 column preview card component</h1>
  

  CSS :

  .sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  }
  

  • your question (div is not centered) :

  for this particular solution you can hard code the value of container and for more info you also can take a look of my solution

  Hope that was helpful for you...

  Marked as helpful

  1