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
Post a Comment