Modify the style at the size of the window less or equal (picels)
-
I'm trying to make the blocks. my_media change if the size of the window
меньше или равняется 1199pxI've done it as an example, but the 1199px windows don't change, they're only starting to change in the window at 1198 and lessels.
I need the styles to change only with a window of 1199 and less peaks.
I'll be very grateful for your help.
.my_media { margin-top: 120px; background: #fff; color:#000; }@media only screen and (max-width: 1199px) {
.my_media {
margin-top: 150px;
background: green;
color:#fff;
}
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <title>Hello, world!</title></head>
<body><header class="container p-3 fixed-top shadow-sm" style="height:120px;">HEADER</header> <div class="container my_media"> <div class="row"> <h1>Hello, world!</h1> </div> <div> <!-- Optional JavaScript; choose one of the two! --> <!-- Option 1: Bootstrap Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script></body>
</html>
-
Add me to the media request for a shotgun.
.my_media { margin-top: 120px; background: #fff; color:#000; }@media only screen and (max-width: 1199.98px) {
.my_media {
margin-top: 150px;
background: green;
color:#fff;
}
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <title>Hello, world!</title></head>
<body><header class="container p-3 fixed-top shadow-sm" style="height:120px;">HEADER</header> <div class="container my_media"> <div class="row"> <h1>Hello, world!</h1> </div> <div> <!-- Optional JavaScript; choose one of the two! --> <!-- Option 1: Bootstrap Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script></body>
</html>
