Почему оригинальные стили не переопределяются в @media
? Вес селекторов одинаковый .home .breadcrumbs
, id
в селекторах нет. Как заставить @media
переопределять нижеследующие стили?
КОД style (scss)
$breadcrumbs_margin: 40px;
.home {
.breadcrumbs {
font-size: 100%;
padding: 0;
height: 100%;
ul {
padding: 0;
margin: 0;
}
li {
margin-left: $breadcrumbs_margin/2;
margin-right: $breadcrumbs_margin/2;
a {
font-weight: normal;
font-size: 115%;
}
}
}
}
КОД mobile (scss)
@media only screen and (min-width : 320px) {
.home {
.breadcrumbs {
font-size: 70%;
li {
margin-left: 1.1vw;
margin-right: 1.1vw;
}
}
}
}
КОД index (Jade)
link(rel="stylesheet", type="text/css", href="css/style.css")
link(rel="stylesheet", type="text/css", href="css/mobile.css")
Дествительно, сейчас решил попробовать min-width
, т.к. вопрос создавался довольно таки давно.
<meta name="viewport" content="width=device-width, initial-scale=1" />
не забываем.@media (max-width: 1000px)
,@media (max-width: 880px)
и так далее.!important
в оригиналах нет#news .news_item-title
в запросе -#news .news_item .news_item-title
Укажите в запросе точно такой же каскад как в оригиналеmax-width
илиmin-width
. Может последовательной подключения файлов mobile.scss и style.scss не правильная.