Всех приветствую, делал адаптацию на сайте с помощью 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
Облазил много сайтов, но так и не выяснил в чём проблема. Можете подсказать что я делаю не так, и как исправить это?
В заранее спасибо за помощь! Я очень благодарен!
