Media Breakpoints are failing

Question

I am missing something really simple here so hopefully somebody can unspin my brain.

I have a page layout working OK but on applying the media breakpoints nothing changes. Below is an example of my CSS. You can see I am just altering the font size to try and get the thing working but nothing changes when altering the browser width. The p font remains the same size regardless of the browser width.

Importantly - the regular Bootstrap responsiveness and page layout does happen, my own media instructions do not.

p {
  font-size: 16px;
}


@media (min-width: 576px) { 
  p {
  font-size: 116%;
  }
}

@media (min-width: 768px) {
  p {
  font-size: 108%;
  }
}

Another example is a carousel I have added. The media instructions only involve the height of the carousel. But like the example above - the carousel height remains the same no matter the broswer width.

#carouselMain {
  height: 460px;
}

@media (min-width: 576px) { 
  #carouselMain {
  height: 660px;
  }
}

@media (min-width: 768px) {
  #carouselMain {
  height: 560px;
  }
}

Thanks. I don't know why this should happen. A similar question has been asked before but the given answer doesn't seem to apply to this question.

Answer 1

Have you tried using the !important after the property? Like this:

@media (min-width: 576px) { 
  p {
  font-size: 116%!important;
  }
}

Answer 2

Give <p> an id and then add this to the CSS stylesheet:

@media (min-width: 400px) { 
  #p{
    color: red;
    font-size:24px;
  }
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

 
  <div class="container-fluid"> 
    <p id="p">P media</p>
  </div>
 

Or use! Important w3.org (info)

@media (min-width: 400px) { 
  .container-fluid > .p{
    color: red;
    font-size: 34px!important;
  }
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

 
  <div class="container-fluid"> 
    <p class="p">P media</p>
  </div>
 

Answer 3

Like those often missed dashes and slashes the problem was poor syntax in the CSS immediately before my breakpoints and so the breakpoints weren't being processed properly. I'm clocking out for the next two and a half days.