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, Aug 08 '16 at 14:16
@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, Aug 08 '16 at 14:18
@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, Aug 08 '16 at 14:21
@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, Aug 08 '16 at 14:23
@feeela Your code snippet renders all the colours just fine. Going to review all the code again to make sure things are not being overridden. — lookininward, Aug 08 '16 at 14:24
@feeela There was another media query that was interfering with the ones posted above. Appears to render correctly now. Thank you for the help. — lookininward, Aug 08 '16 at 15:07

score 0 · Answer 1 · edited May 23 '17 at 12:33

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>

This is correct, but I have chosen the span considering that the OP might want to have line breaks without
. — Siavas, Aug 08 '16 at 14:43
That's actually counter-intuitive. Using a `div` the OP could then employ multiple paragraphs within, but using a `p` tag, they can then *only* employ `
` as anything else would be invalid. — Chris Pratt, Aug 08 '16 at 14:56

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

1 Answers1