CSS: элементы Div на мобильном устройстве по-прежнему имеют ту же ширину, что и рабочий стол, даже если были добавлены медиазапросы

Question

Это действительно странно. У меня есть область героев на этом сайте (https://dev-acupuncture.pantheonsite.io/), и ее две колонки (div) имеют ширину 50% на рабочем столе и 100% на мобильном. Тем не менее, когда я проверяю его на мобильном устройстве, элементы div по-прежнему имеют ширину 50%, хотя у меня настроен медиа-запрос, чтобы сделать его на 100%. Вот так:

.hero-left, .hero-right { height: 500px; width: 50%; margin: 0; }
@media screen and (max-width: 1024px) {
    .hero-left, .hero-right { width: 100%; }
}

Я проверил Консоль, и она видит запрос, но, похоже, не хочет его уважать. Так что все еще на 50%. Действительно озадачен, почему это происходит. Вот мои HTML для этой области.

<section class="hero">
  <div class="hero-left" data-parallax="scroll" data-position-y="15px" data-image-src="<?php echo get_template_directory_uri(); ?>/img/hero.jpg">
    <div class="hero-content">
        <p>Text goes here.</p>
    </div>
  </div>
  <div class="hero-right">
    <div class="hero-right-top" data-parallax="scroll" data-position-y="15px" data-image-src="<?php echo get_template_directory_uri(); ?>/img/hero2.jpg">
        <div class="hero-content">
            <p>Text goes here.</p>
        </div>
    </div>
    <div class="hero-right-bottom" data-parallax="scroll" data-position-y="15px" data-image-src="<?php echo get_template_directory_uri(); ?>/img/hero3.jpg">
        <div class="hero-content">
            <p>Text goes here.</p>
        </div>
    </div>
</section>

Answer 1

Глядя на ваш сайт, вам нужно определить flex-wrap для класса .hero, а также использовать vh вместо px при определении высоты:

.hero {flex-wrap: wrap; height: 100vh;}

Answer 2

возможно, если сделать медиа-запрос для небольших устройств до