Почему не работает адаптация на мобильные устройства?

Question

[Emil7676]

Всех приветствую, делал адаптацию на сайте с помощью media запросов. Указал чтобы стили применялись на устройства до 576px. Конечно же указал в правильной последовательности и тд. Вот собственно и сами media запросы:

@media only screen and (max-width:576px) {
    .mcontent .mtitle {
        padding: 0 40px;
    }
    .work-area {
        padding-left: 25px;
        padding-right: 0px;
    }
    #content .hall-plan .hall .number-left {
        margin-left: 105px;
    }
    #content .hallplan .legend .legend-item.empty i, #content .hall-plan .hall .rows .item.empty {
        border: 2px solid #675a85;
    }
    #content .hallplan .legend .legend-item i, #content .hall-plan .hall .rows .item {
        height: 18px;
        width: 18px;
        top: 4px;
    }
    #content .hall-plan .hall ul {
        left: -120px;
        top: 10px;
    }
    #content .hallplan .legend .legend-item i, #content .hall-plan .hall .rows .item {
        border: 2px solid #dcdcdc;
    }
    #content .hall-plan .hall .display {
        margin: 0px 0px 0px;
    }
    #content .hall-plan .hall .rows #t1.item.empty {
        display: none;
    }
    #content .hall-plan .hall .rows #t3.item.empty {
        left: -120px;
        top: -15px;
    }
    #content .hall-plan .hall .number-right {
        left: -100px;
    }
    #content .hall-plan .hall .rows #t2.item.empty {
        left: -53px;
        top: -15px;
    }
    #content .hall-plan.hall-8 .hall .disabilities_place_1 {
        margin-left: 233px;
        
    }
    #content .hall-plan.hall-8 .hall .disabilities_place_2 {
        margin-left: 263px;
    }
    #content .hallplan .sidebar .item.places {
        right: 287px;
    }
 
    .container .content_p {
        height: 2530px;

    }
    #content .hallplan .sidebar .item.places {
        top: 483px;
        height: 70px;
    }
    #content .hallplan .sidebar .item.total {
        right: 735px;
        top: 195px;
    }
    #content .hall-plan .buttons {
        left: 0px;
        margin: 60px 0 0;
    }
    #content .hallplan .sidebar .item.places .field {
        width: 250px;
    }
    .button.big {
        right: 730px;
        top: 205px;
    }
    #content .hallplan .legend {
        left: 0px;
    }
    #content .hallplan .legend .legend-item {
        float: none;
    }
    .footers_p .footers {
        top: -310px;
    }
    #content .hallplan .legend .blocked.legend-item {
        left: 0px;
        top: 0px;
    }
    #content .hallplan .legend .legend-item.blocked i {
        top: -6px;
    }
    #content .hallplan .legend .legend-item.empty i {
        top: -6px;
    }
    #content .hallplan .legend .legend-item.selected i {
        top: -6px;
    }
    #content .hallplan .legend .legend-item.booked i {
        top: -6px;
    }
    #content .hallplan .legend .legend-item.buy i {
        top: -6px;
    }
    #content .hallplan .legend .legend-item.sold i {
        top: -6px;
    }
    #content .hallplan .legend .legend-item.disabilities i {
        top: -6px;
    }
    
    #content .hallplan .legend .disabilities.legend-item {
        top: 0px;
    }

    .container {
max-width: 360px;
    }
 
}

Так же указал в html данный meta запрос :

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Как можно видить на скриншоте, когда открываешь консоль разработчика хром на пк, и указываешь значение ширины 360px, то всё работает в норме, все стили применяются, и никаких проблем нет. Скриншот:
Но когда я попытался открыть сайт на телефоне, у телефона разрешение браузера 360px, то стили не применились, прикладываю скриншот:
Собственно сама страничка сайта: https://ultra-cinema.ml/seanses-1.htm
Облазил много сайтов, но так и не выяснил в чём проблема. Можете подсказать что я делаю не так, и как исправить это?
В заранее спасибо за помощь! Я очень благодарен!

Comments

[Kentavr16]

почему бы просто не задать для контейтера width вместо max-width?

[Kentavr16]

по медиазапросам далеко не специалист. Но как предположения - возможно ширина самого вьюпорта браузера устройства все же меньше за 360? Это логичное обьяснение - верстка едет при 357.

[Emil7676]

Kentavr16, Да, лучше будет указать просто width, спасибо за ответ, попробую сделать еще адаптацию под ширину меньше 360.