3-coulmn preview card with grid

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,160

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  HTML 📄:

  • You must use a level-one heading (h1) even though this is not a full-page challenge. You can create an '<h1>' element within your 'main' element that will be hidden visually but visible and readable by screen readers. The class "sr-only" hides content visually and here are the styles to copy. e.g.: <h1 class="sr-only">3-column preview card component</h1>

  CSS 🎨:

  • Instead of using the border-radius property to set individual border-radius values for each component. You can use border-radius to parent component and use the overflow: hidden property to clip any content that extends beyond the border-radius of the component.

    .container
        border-radius: 10px;
        overflow: hidden;
    }
    
    .card:nth-child(1) {
        /* border-radius: 10px 10px 0 0; */
    }
    .card:nth-child(3) {
        /* border-radius: 0 0 10px 10px; */
    }
    
    @media (min-width: 950px) {
      .card:nth-child(1) {
        /* border-radius: 10px 0 0 10px; */
      }
      card:nth-child(3) {
        /* border-radius: 0 10px 10px 0; */
      }
    }
    

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  2

  ---

  

  Boots 😺•1,590

  @adityaphasuPosted almost 2 years ago

  @MelvinAguilar I was wondering myself too that I shouldn't write separate border-radius code but didn't know what to do. Thanks for the border-radius CSS solution and the feedback!

  0