Challenge Solution: Base Apparel Coming Soon

Community feedback

• 

  Dusan Brankov•860

  @dusan-bPosted about 2 years ago

  Hi Nicholas,

  I have just looked at your code and noticed that three CSS rules address the <p> element inside <footer>:

  .attribution { /* SPECIFICITY: 10 */
    font-size: 11px;
  }
  
  footer p { /* SPECIFICITY: 2 */
    font-size: 4px;
  }
  
  @media screen and (max-width: 475px)
    footer p { /* SPECIFICITY: 2 */
      font-size: 4px;
    }
  

  The class selector .attribution will always win because of its higher specificity. You could solve this problem by replacing footer p with .attribution within the media query.

  You can learn more about specificity in CSS on Google Developer's web.dev website.

  Another tip: Avoid defining media queries with max-width only, as they overlap each other, which again can lead to problems with specificity.

  I hope I could help. Keep going, and happy coding. :)

  Marked as helpful

  1