Why doesn't the @media query change elements on particular screen sizes?

Question

Playing around with @media queries with Bootstrap 3. The following query structure has come up multiple times while looking at tutorials. However, I'm still having issues.

min-width: 1200px renders the font size (92px) and background (red) correctly, min-width: 992px renders the font size (48px) and background (green) correctly.

However, when I go lower than those two, min-width: 768px and max-width: 768px, their attributes are not applied to the elements. Appreciate any bit of help!

    @media(max-width:767px){
      .jumbotron h1 {
        font-size: 12px;
      }
    
       body {
        background: yellow;
      }
    }
    
    @media(min-width:768px){
      .jumbotron h1 {
        font-size: 24px;
      }
    
       body {
        background: blue;
      }
    }
    
    
    @media(min-width:992px){
      .jumbotron h1 {
        font-size: 48px;
      }
    
       body {
        background: green;
      }
    }
    
    @media(min-width:1200px){
      .jumbotron h1 {
        font-size: 92px;
      }
    
      body {
        background: red;
      }
    }

<body>
  <p class="jumbotron">
    <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
  </p>
</body>

@Miloshio Renders this way in both Chrome and Firefox, doesn't work at all in IE 11. — lookininward
@lookininward The media queries work as expected. I can see a yellow, respective blue, background on smaller screen sizes. Please check the snippet in the question. — feeela
@feeela That's strange. Once I hit: @media(min-width:768px){ .jumbotron h1 { font-size: 24px; } body { background: blue; } } It defaults to a white background. — lookininward
@lookininward I can't see the behavior you are describing. Maybe there is some other stylesheet applied, which is not part of this question? — feeela

Siavas Siavas · Accepted Answer · 2016-08-08T14:29:25

The single problem is that you are having a heading inside a paragraph. Please refer to this question for more information: Should a heading be inside or outside a <p>?

Briefly, a heading cannot be in a paragraph. If you desire to have the same result but not encounter this issue, use a span instead:

@media(max-width:767px){
      .jumbotron span {
        font-size: 12px;
      }
    
       body {
        background: yellow;
      }
    }
    
    @media(min-width:768px){
      .jumbotron span {
        font-size: 24px;
      }
    
       body {
        background: blue;
      }
    }
    
    
    @media(min-width:992px){
      .jumbotron span {
        font-size: 48px;
      }
    
       body {
        background: green;
      }
    }
    
    @media(min-width:1200px){
      .jumbotron span {
        font-size: 92px;
      }
    
      body {
        background: red;
      }
    }

<body>
  <p class="jumbotron">
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
  </p>
</body>

Why doesn't the @media query change elements on particular screen sizes?

1 Answers