Сгибать предметы, не оборачивая сгибанием

Question

Я пытаюсь разместить на своем сайте флекс-пленку с помощью медиа-запроса размером 700 пикселей, и это единственный раздел, где он не работает. Не уверен, что это я идиот, но может ли кто-нибудь увидеть очевидное решение о том, что я должен применять flex-wraps и flex-свойства в моем коде для контейнера предложения, чтобы обернуть поверх изображения?

Мне кажется, это должно быть:

hero-content-container = flex-wrap: wrap;
hero-proposition-container = flex: 0 0 300px;
hero-image-container = flex: 0 0 300px;

Но это не работает. Я также попытался добавить его на более глубокий уровень, поэтому предложение и изображение с помощью flex-wraps, а их дети имеют flex: 0 0 300px.

HTML:

  <section class="hero-section">
    <div class="hero-container">
      <div class="hero-content-container">
        <div class="hero-proposition-container">
          <h1 class="hero-heading">Welcome (title)</h1>
          <p class="hero-paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
            nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum.</p>
          <button type="button" name="button">
            <a href="search-page.html" style="text-decoration: none">This button opens the search page</a>
          </button>
        </div>
      </div>
      <div class="hero-image-container">
        <div class="hero-image-box">
          <h1>Hero picture here</h1>
        </div>
      </div>
    </div>
  </section>

CSS:

.hero-section {
  height: 700px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-container {
  height: 600px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.hero-content-container {
  height: 500px;
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-image-container {
  height: 500px;
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-image-box {
  height: 500px;
  width: 100%;
  border: 3px solid #363636;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-proposition-container button {
  background-color: #f3c623;
  height: 50px;
  width: 300px;
}

.hero-proposition-container a {
  color: #363636;
  font-size: 16px;
}

Спасибо.

Answer 1

У .hero-content-container, который вы указываете, есть flex-wrap: wrap, только один ребенок (.hero-proposition-container). Имея только одного ребенка, нечего оборачивать.

Я также пытался добавить его на уровень глубже ...

Попробуйте подняться на уровень выше.

Добавить flex-wrap: wrap к .hero-container.