Media Breakpoints are failing-CodePudding

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.

CodePudding user response：

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

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

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

 
  <div > 
    <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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

 
  <div > 
    <p >P media</p>
  </div>

CodePudding user response：

Everybody will be pleased to know that 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.