html - @media (max-width: 992px). display: block does not work

Question

@media (max-width: 992px) {
    .menu__list {
        display: none;
    }
    .btn__menu {
        display: block;
    }
}

.btn__menu div {
    height: 5px;
    background-color: #000;
    margin-bottom: 5px;
}

.btn__menu {
    width: 40px;
    display: none;
}

The code above writes me that I have an error in display: block;. I need the burger menu to pop up when the screen is less than 992px wide but I have nothing. Where did I go wrong?

question from:https://stackoverflow.com/questions/65873689/media-max-width-992px-display-block-does-not-work

Answer 1

Swap the order - your general rules will overwrite the media query rules the way it's now, since they follow * after* them. So just move the media queries to the end.