Веб-сайт отображается по-другому во внутреннем браузере Instagram ⇐ Php

[Anonymous]

Я создал веб-сайт, на котором я по сути скрываю и соответственно показываю элемент на экране мобильного устройства.
Кажется, это прекрасно работает с любым браузером и размером, но почему-то Instagram, очевидно, отображает его совсем по-другому... (см. Приложение) скриншоты). По сути, он показывает оба элемента. Тот, который я хочу скрыть, и тот, который я хочу показать. (Вы можете самостоятельно протестировать сайт на https://cato-sports.com/events/berlin-marathon-2024)
Вот как он должен выглядеть: Снимок экрана iPhone, показывающий правильный макет. сайта
Вот как он выглядит в приложении Instagram: введите сюда описание изображения.
Вот урезанный фрагмент этой подстраницы:< /p>

Код: Выделить всё

.event-container-full {
height: 100%;
width: 100%;
}

.event-header {
height: 100vh;
width: 100%;
position: absolute;
z-index: -2;
background-color: black;
}

.event-image-container {
grid-column: 1 / span 2;
border-radius: 7px;
}

.event-header-img {
height: 100%;
display: block;
object-fit: cover;
filter: blur(10px);
-webkit-filter: blur(10px);
opacity: 70%;
}

.event-infobox {
grid-column: 3 / span 7;
display: grid;
gap: 1rem;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: min-content;
}

.event-form {
position: absolute;
translate: -50% -50%;
width: 80%;
left: 50%;
top: 50%;
padding: 1rem;
border-radius: 7px;
background-color: rgba(255, 255, 255, 0.2);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1rem;
z-index: -1;
}

@media only screen and (max-width:800px) {
.event-form {
display: flex;
position: relative !important;
flex-direction: column;
width: 100%;
height: auto;
translate: unset;
justify-self: end;
left: unset;
pointer-events: all;
}
.event-infobox {
display: flex;
flex-direction: column;
}
.event-container-full {
pointer-events: none;
position: relative !important;
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem;
height: auto;
}
.form-container-m {
display: block !important;
padding: 1rem !important;
padding-top: 0 !important;
}
.form-container {
display: none !important;
}
.event-header {
height: 100%;
position: fixed;
top: 0;
left: 0;
}
}

Код: Выделить всё

[img]https://cato-sports.com/media/pages/events/berlin-marathon-2024/b6920f0b41-1726914650/foto-24-small.jpeg[/img]





Marathon Post Race Zone
Berlin

29.09.2024 — 2:00 pm



Join us for our Post Race Community Zone @LAP Coffee (Uhlandstraße 30) for free coffee & pastries, live tunes & exclusive access to our new performance line. The first 30 people showing up will receive a special gift.  You don't need
to run the Marathon to join!

19 Guests already attending









First Name
*











Last Name
*














Email
*















RSVP




















First Name
*











Last Name
*














Email
*















RSVP

Надеюсь, кто-нибудь здесь сможет мне немного помочь с этим, пока я чешусь Я думаю о том, почему Instagram отображает это иначе, чем в любом другом браузере / размере браузера... (я уже очистил кеш и т. д.)
Спасибо

Подробнее здесь: https://stackoverflow.com/questions/790 ... al-browser