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


playing around @media queries bootstrap 3. following query structure has come multiple times while looking @ tutorials. however, i'm still having issues.

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

however, when go lower two, min-width: 768px , max-width: 768px, attributes not applied elements. appreciate 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>

the single problem having heading inside paragraph. please refer question more information: should heading inside or outside <p>?

briefly, heading cannot in paragraph. if desire have same result not encounter issue, use 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>


Comments

Popular posts from this blog

Spring Boot + JPA + Hibernate: Unable to locate persister -

go - Golang: panic: runtime error: invalid memory address or nil pointer dereference using bufio.Scanner -

c - double free or corruption (fasttop) -