Код CSS Media Queries для адаптивного дизайна – не работает ⇐ CSS

[Anonymous]

Я веб-разработчик, работаю над сайтом электронной коммерции WordPress. На главной странице в центре размещен баннер с промо-контентом. В нижней части контента находится список страниц категорий продуктов. Я пытаюсь сделать эту область адаптивной для мобильных устройств. Мне пришлось добавить собственный CSS-код, что я и сделал. Однако когда я захожу на сайт на своем телефоне (iPhone 14), чтобы проверить представление, обновления CSS не применяются. Я не вижу в коде медиа-запроса никаких ошибок, которые могли бы стать причиной этого. Может кто-нибудь сказать мне, почему мой код медиа-запроса не обновляется. Я хочу, чтобы названия категорий продуктов были выделены жирным шрифтом, и я хочу, чтобы ни одно из слов не свисало с баннера на любом мобильном устройстве. Мой код должен отражать это. Вот мой код ниже:
@media only screen and (max-width: 1023px) {
rs-layer#slider-5-slide-6-layer-5.rs-layer {color:#504f4f !important;
font-weight: bold !important;
}
rs-layer#slider-5-slide-6-layer-7.rs-layer a {font-weight: bold !important;
}
}

@media only screen and (max-width: 505px) {
rs-layer#slider-5-slide-6-layer-5.rs-layer {color:#504f4f !important;
font-weight: bold !important;
}
rs-layer#slider-5-slide-6-layer-7.rs-layer a {font-weight: bold !important;
font-size: 16px !important;
}
}

@media only screen and (min-device-width: 320px) and (max-width: 500px) {
rs-layer#slider-5-slide-6-layer-5.rs-layer {color:#504f4f !important;
font-weight: bold !important;
}
rs-layer#slider-5-slide-6-layer-7.rs-layer a {font-weight: bold !important;
font-size: 14px !important;
}
}


Подробнее здесь: https://stackoverflow.com/questions/785 ... ot-working