Как разместить другой баннер поверх моего сайта, используя @media?

Question

Я пытаюсь заставить свой веб-сайт иметь отдельный верхний баннер в режиме рабочего стола и в мобильном режиме с отзывчивыми тегами @media

Итак, я изо всех сил пытался понять, что я делаю неправильно? Я пытаюсь сделать так, чтобы в режиме рабочего стола он использовал баннер верхнего заголовка рабочего стола, но затем, когда он достигнет ширины около 850 пикселей, он переключится на верхний мобильный заголовок, который представляет собой значки вместо текста вдоль заголовка.

Неважно, что я пытаюсь, это не работает, и оба заголовка присутствуют независимо от ширины сайта.
Я пытался использовать такой код;

@media (max-width:850px){
.mobile_menu{
    display:none !important; 
    }
}

@media (max-width:2000px min-width:850px){
.top-menu-container{
    display:none !important;
    }
}

Пожалуйста, если кто-нибудь может помочь, высоко оцените, и я заранее извиняюсь, если я просто глуп и не понимаю что-то, поскольку я довольно плохо знаком со всем кодированием @media в CSS.

Answer 1

Это то, что вы ищете:

@media only screen and (max-width:850px) {
    /* STYLES HERE */
}

@media only screen and (min-width:851px) and (max-width:2000px) { 
    /* STYLES HERE */
}

вам нужно использовать and.