Can't Change Font Size in @media query

1 
#welcome-section > p {
  color: white;
  font-size: 38px;
  font-weight: bold;
  margin-right: 500px;
  margin-top: 20px;
  margin-bottom: 170px;
  position: absolute;
  display: inline-block;
  width: 40%;
}

@media (max-width: 32rem) {
  p {
    font-size: 10px; 
    right: -300px; 
  }
}

Does anyone have a clue why my font-size isn’t changing when I apply this @media query?

h1 {
  margin-bottom: 400px;
  color: #373d47;
  font-size: 12rem;
  font-weight: 900;
  font-family: "Montserrat", sans-serif;
  letter-spacing: -0.02em;
  margin-right: 500px;
  position: absolute;
  display: inline-block;
  width: 40%;
}

@media (max-width: 32rem) {
  h1 {
    font-size: 7.5rem; 
    margin-right: 260px; 
    top: -10px;
  }
}

I did this to my h1 and it had no problems changing the font-size.

2

Which of these selectors has the higher precedence? Note: media queries do not add to specificity.

The h1 media query seems to be working for me. I’m assuming you have the media query placed after the initial h1 ruleset. You might need to show us all of your HTML and CSS if you can’t get it working the way you want.

1 Like
3

Ahhhh thank you, I made a mistake by only putting p when the @media should be targeting #welcome-section p {

Everything is working now

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.