Responsive grid section created with Angular 18, Sass and SEO

Community feedback

• 

  P

  kephalosk•260

  @kephaloskPosted about 1 month ago

  Nice solution :) I had a look at your card.component.scss and noticed the deep nested structures:

  .container {
  ...
    header {
  ...
  
      .name-container {
        p {
          margin: 0;
        }
  ...
      }
    }
  ...
  }
  

  In S/CSS it's best practice to avoid deep nesting of elements. A flatten hierarchy improves the readability of your code, e.g.:

  .container {
    padding: 1.15rem 2.3rem;
    border-radius: 10px;
    background-repeat: no-repeat;
    background-position: right 2rem top 0;
    background-size: 100px;
  
    @media (min-width: 1200px) {
      background-position: right 6rem top 0;
    }
  }
  
  .name-container {
  ...
  }
  
  header {
    display: flex;
    align-items: center;
    gap: 2rem;
  }
  
  p {
    margin: 0;
  }
  

  Marked as helpful

  0