@dusan-b
Posted
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