-2

I have a few divs with some text in it. When changing the font-size for all of them in the media query, it doesn't wanna change the size of 'text-1', but it will change the size of 'text-2'

enter image description here

Before media query:

enter image description here

enter image description here

After media query:

enter image description here

enter image description here

If I change the font-color in the media query, text-1 will change but as for the sizing, it doesn't?

I've also deleted EVERY SINGLE other element in both HTML and CSS, and the issue is still there? That's literally impossible

enter image description here

BrightParts
  • 73
  • 5
  • Please read [ask]; in particular the part about providing a [mcve] (there's no media query in the pictures you provided) and doing so as text, not pictures of text. – Quentin Mar 22 '23 at 21:50
  • Possibly duplicate: https://stackoverflow.com/questions/2809024/how-are-the-points-in-css-specificity-calculated – Quentin Mar 22 '23 at 21:51
  • @Quentin I've read through that post but don't really see anything that can help me or why it's a duplicate. Even when deleting every single element, and only keeping the divs with text in them, the issue remains. When changing the color for example, it works. Changing the size however doesn't? Really weird – BrightParts Mar 22 '23 at 21:58

1 Answers1

0

cause selector .main .main-content .text-1 has a specificity of 30 (3 classes * 10) which is > (greater) than your selector in media - .text-1 (only 10).

change selector

.main .main-content .text-1, .text-2, .text-3 {

to

.text-1, .text-2, .text-3 {

And you will have same specificity (10) in both places.

You can read about specificity of CSS selectors here as example

dbvech
  • 24
  • 1
  • 3