CSS - медиа запросов не работает должным образом

Question

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

Я создал простой текстовый div, чтобы убедиться, что он даже работает, и я пытаюсь изменить background-color смены div на синий, если width браузера меньше 500px.

Кто-нибудь знает, что мне не хватает?

#text_box { 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: red; 
 
} 
 
@media screen and (max-width: 500px) { 
 
    #test_box { 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: blue; 
 
    } 
 
}

<div id="text_box">Test</div>

Вот мой demo

Answer 1

у вас есть опечатка внутри медиа-запроса в вашем id, это не test_box, но text_box.

плюс вам не нужно повторять уже заданные ранее свойства, если они имеют одинаковое значение.

#text_box { 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: red; 
 
} 
 
@media screen and (max-width: 500px) { 
 
    #text_box { 
 
    background-color: blue; 
 
    } 
 
}

<div id="text_box">Test</div>