Почему не работают media запросы без !important?

Question

[Артур Карапетян]

Какие-то запросы работаю, а какие-то только с !important
запросы кампилируются из sass в css вот код:

PS медиа запросы находятся в конце css файла

Comments

[sim3x]

код вставлется текстом в code

нужен не только твой сасс, но и результат в цсс

[Артур Карапетян]

да но только в чистом css около 2000 строк

[iBird Rose]

Артур Карапетян: прикинь) скидывать можно именно тот кусок который ты пометил в скрине) а не все 2к строк)

[Артур Карапетян]

body,
html {
    height: 100%
}

.btn {
    text-decoration: none;
    color: #000
}

.btn:active,
.btn:focus,
.btn:hover,
.btn:visited {
    text-decoration: none;
    color: #000
}

body {
    font-size: 16px;
    min-width: 320px;
    position: relative;
    line-height: 1.6;
    font-family: roboto-example, sans-serif;
    overflow-x: hidden;
    opacity: 1
}

body.is-home .main-head .top-line {
    margin-top: 5px
}

body.is-home .main-head .top-line .logo-wrap {
    width: 100%
}

body.is-home .main-head .top-line .contacts-wrap {
    font-weight: 700;
    margin-top: 15px;
    color: #4c4c4c
}

body.is-home .main-head .top-line .fa {
    margin-right: 8px;
    color: #90aef4;
    font-size: 18px
}

body.is-home .main-head .top-line .line {
    width: 100%;
    height: 1px;
    background-color: #f0f0f0;
    margin-top: 5px
}

body.is-home .main-head .top-line .main-mnu {
    font-family: raleway-example, sans-serif;
    font-weight: 600
}

body.is-home .main-head .top-line .main-mnu ul {
    list-style: none;
    margin: 20px 0;
    padding: 0;
    display: flexb;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around
}

body.is-home .main-head .top-line .main-mnu ul .mnu-btn {
    color: #4c4c4c
}

body.is-home .main-head .top-line .main-mnu ul .mnu-btn:active,
body.is-home .main-head .top-line .main-mnu ul .mnu-btn:focus,
body.is-home .main-head .top-line .main-mnu ul .mnu-btn:hover {
    color: #90aef4
}

body.is-home .main-head .top-line .main-mnu ul .mnu-btn.selected {
    color: #90aef4
}

body.is-home .main-head .fs-wrap {
    min-height: 600px;
    height: 85vh;
    background-size: cover;
    background-position: center bottom;
    font-family: comfortaa-example, sans-serif;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

body.is-home .main-head .fs-wrap .fs-center {
    margin: auto
}

body.is-home .main-head .fs-wrap h1 {
    color: #fff;
    font-size: 64px;
    margin: 0
}

body.is-home .main-head .fs-wrap p {
    color: #fff;
    font-size: 20px;
    margin: 0
}

.hidden {
    display: none
}

@media only screen and (max-width:992px) {
    .logo-wrap {
        text-align: center
    }
    .contacts-wrap {
        text-align: center;
        margin-top: 5px!important;
        margin-bottom: 5px!important
    }
}

@media only screen and (max-width:480px) {
    .fs-wrap {
        background-position: center right!important;
        text-align: center
    }
    .fs-wrap h1 {
        font-size: 48px!important
    }

Answer 1

[Ankhena]

Логично
сначала
body.is-home .main-head .top-line .contacts-wrap
а в media только .contacts-wrap
У первого специфичность выше, вот и перебивает, читайте тут

Answer 2

[Eg0]

покажи на https://jsfiddle.net, а не на скриншоте