2

Не применяются все медиа запросы(если это так называется),кроме

@media screen and (min-width: 1300px)

,расположены в самом конце единственного css файла.

@media screen (min-width: 320px)   {
    .content-wrapper{
        position: fixed;
    }
    .footer{
        display: none;
    }
     .music{
        display: none;
    }
}

@media screen (min-width: 1024px)  {
    .music{
        position: absolute;
        left: 82%;
        top: 3%;
    }
    button#dark-btn{
        position: absolute;
        left: 78%;
    }
    .center{
        position: absolute;
        right: 30%;
        bottom: 1%;
    }
}


@media screen and (min-width: 1300px) {

    .menu {
        float: right;
        margin-right: -1%;

    }

    .audiojs {
        margin-top: 1%;
        margin-right: -2%;
    }

    .btn {
        background: url(/local/img/lamp1.svg);
        height: 22px;
        width: 25px;
        border: none;
        position: absolute;
        cursor: pointer;
        right: 11%;
        top: 2%;

    }

    .center {
        position: absolute;
        right: 43%;
        bottom: 1%;
    }

    .bg-wrapper {
        position: fixed;
        top: -20px;
        left: -34px;
        z-index: 1;
        width: 100vw;
        height: 100vh;
    }
    .mega{
        position: absolute;
        height: 40%;
        left: 59%;
        top: 141%;
    }
    .post{
        position: absolute;
        height: 50%;
        top: 151%;
        left: 45%;
    }
    a.start{
        float: left;
        margin-left: 38%;
        margin-top: 27%;
        cursor: pointer;
    }
     img.foto{position: absolute;
         width: 300px;
         height: 300px;
         left: 25%;
         
        
    }
    img.foto1{
        position: absolute;
         width: 300px;
         height: 300px;
        top: 3%;
        left: 52%;
        
    }
    .mus_obl{
        margin-left: 26%;
        margin-top: 10%;
    }
    img.pen{
        width: 150px;
        height: 500px;
    }
    .pen{
        position: absolute;
        top: 11%;
        right: 8%;
    }
    p.form1{
        margin-top: 7%;
        margin-left: -33%;
    }
    .contact_form input
    {
        width: 42%;
    }
        .contact_form textarea
    {
        width: 42%;
    }
    .com{
        overflow: hidden auto;
        height: 280px;
    }
    img.air{
        border-style: none;
        width: 350px;
        height: 350px;
        position: absolute;
        top: 40%;
        right: -38%;
            
        
    }
    #ex2{
        background: url(/local/img/back.png);
        box-shadow: none;
        text-align: center;
        height: 57%;
    }
    #ex1{
        background: url(/local/img/back.png);
        box-shadow: none;
        text-align: center;
        height: 60%;
    }
    .comment{
        padding: 5px;
    }
    #ex3{
        height: 78%;
    }


}

Заранее всем спасибо за ответы!

p.s. это все еще работает через битрикс, но вроде кеш везде очистила, не должно влиять

2
  • Почему вы считаете что не работают? В консоли есть ошибки?
    – Alexey Ten
    Commented 6 мар. 2019 в 5:10
  • @AlexeyTen потому что не применяются на сайте, в консоли есть ошибки, но не связанные именно с этим Commented 6 мар. 2019 в 5:15

2 ответа 2

2

У вас в коде пропущен "and". Обратите внимание `@media screen AND (min-width/max-width: ...px) {}

5
  • обязательно ли ставить точку с запятой, потому что когда поставила они опять не применялись? Commented 6 мар. 2019 в 6:26
  • Простите это был мой косяк, не увидел. Не надо ставить точку с запятой после скобок. Исправил.
    – O.Yudin
    Commented 6 мар. 2019 в 6:27
  • Спасибо вам за ответ, а вы случайно не знаете еще как правильно написать запрос, где указаны и max-width и min width? Commented 6 мар. 2019 в 6:37
  • Чтобы более детально разобраться с медиа запросами советую почитать про них на htmlbook. Вот ссылка на источник, там все придельно понятно написано html5book.ru/css3-mediazaprosy
    – O.Yudin
    Commented 6 мар. 2019 в 6:41
  • Если вы имели введу это, то вот: @media (min-width: 600px) and (max-width: 800px) { }
    – O.Yudin
    Commented 6 мар. 2019 в 6:44
1

Ответ оказался очень очевидным, нужно было просто писать "and", например: @media screen and (min-width: 1300px), всем спасибо!

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.