Медиа запросы не перебивают друг друга

Question

@media(max-width: 1600px) {
  .carousel .carousel__inner .slick-prev {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-70%);
    transform: translateY(-70%);
    left: 170px;
    z-index: 1;
    background: none;
    border: none
  }
  .carousel .carousel__inner .slick-prev img {
    width: 21px;
    height: 50px
  }
  .carousel .carousel__inner .slick-next {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-70%);
    transform: translateY(-70%);
    right: 192px;
    z-index: 1;
    background: none;
    border: none
  }
}

@media(max-width: 1850px) {
  .carousel .carousel__inner .slick-prev {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-70%);
    transform: translateY(-70%);
    left: 327px;
    z-index: 1;
    background: none;
    border: none
  }
  .carousel .carousel__inner .slick-prev img {
    width: 21px;
    height: 50px
  }
  .carousel .carousel__inner .slick-next {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-70%);
    transform: translateY(-70%);
    right: 353px;
    z-index: 1;
    background: none;
    border: none
  }
}

@media(max-width: 1400px) {
  .carousel .carousel__inner {
    width: 100%
  }
  .promo .promo_block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: 106px
  }
  .promo .promo_block_item {
    width: 240px;
    height: 240px
  }
}

@media(max-width: 1200px) {
  .header_shopping_text {
    font-size: 16px
  }
  .promo .promo_header {
    font-size: 49px
  }
  .promo .promo_block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: 106px
  }
  .promo .promo_block_item {
    width: 230px;
    height: 230px
  }
  .promo .promo_block_item .title {
    font-size: 25px
  }
  .promo .promo_block_item .text_block {
    font-size: 12px
  }
}

@media(max-width: 1024px) {
  .logo {
    width: 130px
  }
  .header_shopping_icon {
    width: 15%;
    margin-right: 17px
  }
}

@media(max-width: 992px) {
  .header .header_menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: fixed;
    background-color: rgba(0, 0, 0, .8);
    z-index: 1;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    -webkit-transition: .6s all;
    transition: .6s all
  }
  .header .header_menu .menu_item {
    border: none;
    margin-top: 30px
  }
  .header_nav .hamburger {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
  }
  .header_nav .hamburger_active span {
    margin: 0 auto
  }
  .header_nav .hamburger_active span:nth-child(1) {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    margin-bottom: -1px
  }
  .header_nav .hamburger_active span:nth-child(2) {
    display: none
  }
  .header_nav .hamburger_active span:nth-child(3) {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 23px;
    margin-bottom: 1px
  }
  .header_nav .hamburger span {
    -webkit-transition: .6s all;
    transition: .6s all
  }
  .logo {
    margin: 0 auto;
    width: 250px
  }
  .logo img {
    width: 100%
  }
  .header .header_menu_active {
    right: 0
  }
  .header_shopping {
    display: none
  }
  header .promo {
    margin: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
  }
  header .promo_wrapper {
    display: block;
    margin: 35px auto 65px auto;
    font-weight: 600;
    text-align: center;
    width: 326px
  }
  .promo .promo_header {
    font-size: 49px
  }
  .promo .promo_subheader {
    display: none
  }
  .promo .promo_block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: 50px
  }
  .promo .promo_block_item {
    width: 230px;
    height: 230px
  }
  .promo .promo_block_item .title {
    font-size: 25px
  }
  .promo .promo_block_item .text_block {
    font-size: 12px
  }
  nav .phone_icon {
    display: block;
    z-index: 1
  }
  .promo_block .item_dis_no {
    display: block;
    opacity: 6
  }
  .carousel__inner .item_dis_yes {
    display: none
  }
  .carousel .carousel__inner .slick-prev {
    display: none
  }
}

* {
  font-family: RF Rufo;
  margin: 0;
  padding: 0
}

.container {
  width: 1300px
}

header {
  padding: 30px 30px 101px 0px;
  background-color: #000;
  height: 100%
}

.header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

.header_nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

.header_menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  list-style-type: none;
  font-family: RF Rufo;
  font-style: normal;
  font-weight: bold;
  font-size: 15px;
  line-height: 134.3%;
  letter-spacing: .13em;
  text-transform: uppercase
}

.header_menu a::after {
  content: "";
  display: block;
  width: 0px;
  height: 0px;
  background-color: red;
  margin-top: 7px;
  padding: 1.5px 0
}

.header_menu a:hover::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background-color: red;
  -webkit-transition: .5s all;
  transition: .5s all;
  margin-top: 7px;
  padding: -2px 0
}

.header_shopping {
  font-family: RF Rufo;
  font-style: normal;
  font-weight: bold;
  font-size: 22px;
  line-height: 134.3%;
  letter-spacing: .13em;
  text-transform: uppercase
}

.header_shopping_icon {
  margin-right: 31px
}

.header a {
  color: #fff;
  text-decoration: none
}

.promo {
  padding-top: 36px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 100px
}

.promo_header {
  font-style: normal;
  font-weight: 100;
  font-size: 72px;
  line-height: 103.5%;
  letter-spacing: .025em;
  text-transform: uppercase
}

.promo_wrapper {
  display: inline-block;
  width: 545px;
  color: #fff
}

.promo_subheader {
  margin-top: 49px;
  font-family: Montserrat;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 165%;
  color: #a8a8aa
}

.promo_block {
  margin-left: 100px
}

.promo_block_item {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: inline-block;
  height: 250px;
  width: 250px;
  position: relative;
  margin-right: 20px
}

.promo_block_item .title {
  font-style: normal;
  font-weight: normal;
  font-size: 30px;
  line-height: 103.5%;
  letter-spacing: .025em;
  text-transform: uppercase;
  color: #fff;
  position: absolute;
  bottom: 94px;
  padding: 0 22px
}

.promo_block_item .text_block {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 154.4%;
  color: #fff;
  position: absolute;
  bottom: 17px;
  padding: 0 22px
}

.promo_item_1 {
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0.6))), url(../img/coffe.png) center center/cover no-repeat;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../img/coffe.png) center center/cover no-repeat;
  margin-right: 20px
}

.promo_item_1:hover {
  cursor: pointer;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(251, 79, 80, 0.7)), to(rgba(251, 79, 80, 0.7))), url(../img/coffe.png) center center/cover no-repeat;
  background: linear-gradient(0deg, rgba(251, 79, 80, 0.7), rgba(251, 79, 80, 0.7)), url(../img/coffe.png) center center/cover no-repeat
}

.promo_item_2 {
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0.6))), url(../img/machine.png) center center/cover no-repeat;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../img/machine.png) center center/cover no-repeat
}

.promo_item_2:hover {
  cursor: pointer;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(251, 79, 80, 0.7)), to(rgba(251, 79, 80, 0.7))), url(../img/machine.png) center center/cover no-repeat;
  background: linear-gradient(0deg, rgba(251, 79, 80, 0.7), rgba(251, 79, 80, 0.7)), url(../img/machine.png) center center/cover no-repeat
}

.promo_item_3 {
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0.6))), url(../img/milk.png) center center/cover no-repeat;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../img/milk.png) center center/cover no-repeat
}

.promo_item_3:hover {
  cursor: pointer;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(251, 79, 80, 0.7)), to(rgba(251, 79, 80, 0.7))), url(../img/milk.png) center center/cover no-repeat;
  background: linear-gradient(0deg, rgba(251, 79, 80, 0.7), rgba(251, 79, 80, 0.7)), url(../img/milk.png) center center/cover no-repeat
}

.promo_item_4 {
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0.6))), url(../img/barista.png) center center/cover no-repeat;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../img/barista.png) center center/cover no-repeat
}

.promo_item_4:hover {
  cursor: pointer;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(251, 79, 80, 0.7)), to(rgba(251, 79, 80, 0.7))), url(../img/barista.png) center center/cover no-repeat;
  background: linear-gradient(0deg, rgba(251, 79, 80, 0.7), rgba(251, 79, 80, 0.7)), url(../img/barista.png) center center/cover no-repeat
}

.promo_item_5 {
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0.6))), url(../img/woman.png) center center/cover no-repeat;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../img/woman.png) center center/cover no-repeat
}

.promo_item_5:hover {
  cursor: pointer;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(251, 79, 80, 0.7)), to(rgba(251, 79, 80, 0.7))), url(../img/woman.png) center center/cover no-repeat;
  background: linear-gradient(0deg, rgba(251, 79, 80, 0.7), rgba(251, 79, 80, 0.7)), url(../img/woman.png) center center/cover no-repeat
}

.promo_item_6 {
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0.6))), url(../img/building.png) center center/cover no-repeat;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../img/building.png) center center/cover no-repeat
}

.promo_item_6:hover {
  cursor: pointer;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(251, 79, 80, 0.7)), to(rgba(251, 79, 80, 0.7))), url(../img/building.png) center center/cover no-repeat;
  background: linear-gradient(0deg, rgba(251, 79, 80, 0.7), rgba(251, 79, 80, 0.7)), url(../img/building.png) center center/cover no-repeat
}

.promo_item_7 {
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0.6))), url(../img/company.png) center center/cover no-repeat;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../img/company.png) center center/cover no-repeat
}

.promo_item_7:hover {
  cursor: pointer;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(251, 79, 80, 0.7)), to(rgba(251, 79, 80, 0.7))), url(../img/company.png) center center/cover no-repeat;
  background: linear-gradient(0deg, rgba(251, 79, 80, 0.7), rgba(251, 79, 80, 0.7)), url(../img/company.png) center center/cover no-repeat
}

.promo_item_8 {
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0.6))), url(../img/milk.png) center center/cover no-repeat;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../img/milk.png) center center/cover no-repeat
}

.promo_item_8:hover {
  cursor: pointer;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(251, 79, 80, 0.7)), to(rgba(251, 79, 80, 0.7))), url(../img/milk.png) center center/cover no-repeat;
  background: linear-gradient(0deg, rgba(251, 79, 80, 0.7), rgba(251, 79, 80, 0.7)), url(../img/milk.png) center center/cover no-repeat
}

.carousel {
  margin: 0 auto;
  margin-top: 20px
}

.carousel__inner {
  position: relative
}

.carousel .slick-prev {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-70%);
  transform: translateY(-70%);
  left: 453px;
  z-index: 1;
  background: none;
  border: none
}

.carousel .slick-prev img {
  width: 21px;
  height: 50px
}

.carousel .slick-next {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-70%);
  transform: translateY(-70%);
  right: 475px;
  z-index: 1;
  background: none;
  border: none
}

.carousel .slick-slide {
  opacity: .2
}

.carousel .slick-active {
  opacity: .9
}

.hamburger {
  display: none;
  z-index: 1;
  background: none;
  width: 23px;
  height: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  right: 18px;
  position: fixed;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  top: 30px;
  display: none
}

.line_1 {
  width: 23px;
  height: 2px;
  background: #fff;
  display: inline-block
}

.line_2 {
  width: 19px;
  height: 2px;
  background: #fff;
  display: inline-block;
  margin-top: 5px
}

.line_3 {
  width: 16px;
  height: 2px;
  background: #fff;
  display: inline-block;
  margin-top: 5px
}

.phone_icon {
  width: 16px;
  height: 16px;
  position: fixed;
  left: 18px;
  top: 30px;
  display: none
}

.phone_icon img {
  width: 100%
}

.item_dis_no {
  display: none
}


/*# sourceMappingURL=style.min.css.map */

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
  <title>Document</title>
  <link rel="stylesheet" href="css/bootstrap-reboot.min.css">
  <link rel="stylesheet" href="css/bootstrap-grid.min.css">
  <link rel="stylesheet" href="css/slick.css">
  <link rel="stylesheet" href="css/style.min.css">
  <link rel="stylesheet" href="fonts/fonts.css">
</head>

<body>
  <header>
    <div class="container">
      <div class="header">
        <div class="container">
          <div class="row">
            <nav class="header_nav">
              <a class="logo" href="#"><img src="img/logo.svg" alt="">
              </a>
              <ul class="header_menu col-md-5 offset-md-1">
                <li class="menu_item"><a href="#">Продажа</a></li>
                <li class="menu_item"><a href="#">Аренда</a></li>
                <li class="menu_item"><a href="#">Сервис</a></li>
                <li class="menu_item"><a href="#">О Компании</a></li>
              </ul>
              <div class="header_shopping col-md-3 offset-md-2">
                <a href="#"><img class="header_shopping_icon" src="img/shopping.svg" alt=""></a>
                <a href="tel:+380985554433" class="header_shopping_text">+7 (3452)500-006</a>
              </div>
              <a class="phone_icon" href=""><img src="img/phone.svg" alt=""></a>
              <div class="hamburger">
                <span class="line_1"></span>
                <span class="line_2"></span>
                <span class="line_3"></span>
              </div>
            </nav>
          </div>
        </div>
      </div>

      <div class="promo">
        <div class="promo_wrapper">
          <div class="promo_header">МЫ ТАКИЕ КЛАССНЫЕ ПРЯМ не могу</div>
          <div class="promo_subheader">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus </div>
        </div>
        <div class="promo_block">
          <div class="promo_block_item promo_item_1">
            <div class="title">Продажа</div>
            <div class="text_block">Профессиональные кофемашины с бесплатной доставкой по РФ</div>
          </div>
          <div class="promo_block_item promo_item_2">
            <div class="title">Аренда</div>
            <div class="text_block">Бесплатная аренда кофемашины для ресторана или офиса</div>
          </div>
          <div class="promo_block_item promo_item_4 item_dis_no">
            <div class="title">Сервис</div>
            <div class="text_block">Собственный сервисный цех в городе</div>
          </div>
        </div>
      </div>

    </div>
    <div class="carousel">
      <div class="carousel__inner">
        <div>
          <div class="promo_block_item promo_item_3">
            <div class="title">Обучение бариста</div>
            <div class="text_block">Пройди обучение очно в школе барменов или онлайн</div>
          </div>
        </div>
        <div>
          <div class="promo_block_item promo_item_4 item_dis_yes">
            <div class="title">Сервис</div>
            <div class="text_block">Собственный сервисный цех в городе</div>
          </div>
        </div>
        <div>
          <div class="promo_block_item promo_item_5">
            <div class="title">собственный кофе</div>
            <div class="text_block">Кофе который мы производим и продаем</div>
          </div>
        </div>
        <div>
          <div class="promo_block_item promo_item_6">
            <div class="title">GRANNYS BAR</div>
            <div class="text_block">Кофе который мы производим и продаем</div>
          </div>
        </div>
        <div>
          <div class="promo_block_item promo_item_8">
            <div class="title">Обучение бариста</div>
            <div class="text_block">Пройди обучение очно в школе барменов или онлайн</div>
          </div>
        </div>
        <div>
          <div class="promo_block_item promo_item_7">
            <div class="title">Бар Ржавый дед</div>
            <div class="text_block">Пройди обучение очно в школе барменов или онлайн</div>
          </div>
        </div>
      </div>
      <p id="width"></p>
    </div>
  </header>
  <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
  <script type="text/javascript" src="js/jquery-migrate-1.4.1.min.js"></script>
  <script src="js/slick.min.js"></script>
  <script src="js/script.js"></script>
  <script src="js/scr.js"></script>
</body>

</html>

Не могу понять почему мои меда запросы не перебывают основной css и друг друга! подскажите в чем ошибка? Преоритетность одна у них!

БЛОГ НА HUSL

Медиа запросы не перебивают друг друга

Ответы (0 шт):