Four card feature section | HTML5 & CSS3

Community feedback

• 

  Adriano•38,310

  @AdrianoEscarabotePosted 29 days ago

  Hi Carla Sablic, how’s everything? I think your project turned out great! However, I have some feedback that I think might be useful:

  You have used <br> , using <br> is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology. Screen readers may announce the presence of the element. This can be a confusing and frustrating experience for the person using the screen reader.

  You can read more in MDN.

  The rest is amazing.

  I hope this is helpful. 👍

  Marked as helpful

  1

  ---

  

  Carla Sablic•120

  @CarlaSablic95Posted 29 days ago

  @AdrianoEscarabote Hi Adriano, I didn’t know about the negative connotation of the <br> tag for screen readers. I’ll look for another solution. Thanks for your feedback!

  1
• 

  KapteynUniverse•2,170

  @KapteynUniversePosted 30 days ago

  Hey Carla, nice job.

  You need to add align items: center to the .four-cards so first and last card vertically centered

  @media (min-width: 1024px) {
      .four-cards {
          display: flex;
          gap: 20px;
          align-items: center;
      }
  }
  

  Marked as helpful

  1

  ---

  

  Carla Sablic•120

  @CarlaSablic95Posted 30 days ago

  @KapteynUniverse Hi, ok, I just realized and solved it another way:

  section > article:nth-child(1) { display: flex; align-items: center; }

  section > article:nth-child(3) { display: flex; align-items: center; } Maybe it's more complicated. That's why I'm going to replace it with your solution. Thanks!

  1