Как переопределить @media (max-width), используя стильный

Question

вступление

это похоже на этот вопрос, но, к сожалению, ответ относится только к greasmonkey (который работает только в Firefox). Далее об этом спрашивали на стильном форуме, но ответ был неоднозначным.

Вопрос

Я хочу удалить левый столбец на странице справки Azure и развернуть основное тело, чтобы оно покрыло область экрана. Первая часть может быть легко сделана этим

#sidebarContent {display:none}

Как бы то ни было, вторая часть должна преобразовать это

media (max-width: 1199.99999px)

к этому

media (max-width: 100%)

Но я понятия не имею, как это сделать, используя стильные... идеи?

Answer 1

Чтобы переопределить медиа-запрос, вам просто нужно загрузить другой медиа-запрос - который также относится к вашему устройству - после него.

Ну... вы хотите тупой медиа-запрос, который относится ко всему. Лучший способ - это использовать @media (min-width: 1px) так как это включает в себя все устройства.

Теперь соберите все вместе - вместе с некоторыми другими чистками CSS, такими как padding а также margin снятие и установка нового width за .mainContainer и вы получите это

#sidebar {
    display: none;
}
@media (min-width: 1px) {
    .mainContainer {
        margin: 0 auto;
        width: 100vw;
        padding: 0;
    }
    body>.container {
    padding: 0;
}
}

Новый код: (с другим селектором для ширины)

#sidebar {
    display: none;
}
@media (min-width: 1px) {
    .mainContainer { /*example styles*/
        margin: 0 auto;
        width: 100vw;
    }
    body>.container {
    padding: 0;
}
    body>.mainContainer>main {
    max-width: 100vw!important;

}
}

Вы все еще должны настроить отступы по своему усмотрению, так как установка отступа на 0 немного нарушает дизайн, но это должно быть хорошей отправной точкой.

До:

После: