Изменение размера текста целевой страницы под изображением в браузере

Question

Я не понимаю, почему текст попадает под изображение до того, как в игру вступает гибкая упаковка. Я знаю, что это, вероятно, что-то простое, но я просто не могу понять ... Я поместил ширину по обеим сторонам страницы, но они, кажется, игнорируются, когда дело доходит до изменения размера, и текст почти полностью скрывается за изображением flex wrap опускает его ниже (я хочу, чтобы изображение было сверху, когда это произойдет, но я перейду этот мост, когда подойду к нему, при условии, что я буду использовать свойство reverse в flex). Во всяком случае, не уверен, что происходит, и извинения за вероятный беспорядок HTML и CSS.

Спасибо

    <div class="layout">
      <div class="left-sect">
        <img class="logo" src="./images/logo.svg" alt="site logo" />
        <div class="l-content">
          <h1 class="s-head">We're</h1>
          <h1>
            Coming <br />
            Soon
          </h1>
          <p>
            Hello fellow shoppers! We're currently building our new fashion
            store. Add your email below to stay up-to-date with announcements
            and our launch deals.
          </p>
          <input type="email" class="main-form" />
          <button type="submit">
            <img src="./images/icon-arrow.svg" alt="form button arrow" />
          </button>
        </div>
      </div>

      <div class="right-sect">
        <img class="main-img" src="./images/hero-desktop.jpg" alt="" />
      </div>
    </div>
  </body> 


CSS


 :root {
  --ds-red: hsl(0, 36%, 70%);
  --soft-red: hsl(0, 93%, 68%);
  --dg-red: hsl(0, 6%, 24%);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-size: 16px;
  font-family: "Josefin Sans", sans-serif;
  background-image: url(./images/bg-pattern-desktop.svg);
  background-size: cover;
  background-position: center;
}


.layout {
  display: flex;
  flex-direction: row;
  /* flex-wrap: wrap; */
}

.left-sect {
  padding: 4rem 10rem;
  background-image: url(./images/bg-pattern-desktop.svg);
  background-size: cover;
  background-position: center;
  width: 60%;
}

.l-content {
  margin-top: 7rem;
}

.main-img {
}


.s-head {
  color: var(--ds-red);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 4rem;
  letter-spacing: 1.2rem;
}

h1 {
  font-size: 4rem;
  letter-spacing: 1.2rem;
  text-transform: uppercase;
  color: var(--dg-red);
  font-weight: 400;
}

p {
  color: var(--ds-red);
  text-emphasis: left;
  width: 30rem;
  line-height: 1.3rem;
  margin-top: 1.5rem;
}

Answer 1

Вы должны добавить медиа-запросы.

 :root {
  --ds-red: hsl(0, 36%, 70%);
  --soft-red: hsl(0, 93%, 68%);
  --dg-red: hsl(0, 6%, 24%);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-size: 16px;
  font-family: "Josefin Sans", sans-serif;
  background-size: cover;
  background-position: center;
}


.layout {
  display: flex;
}

.left-sect {
  padding: 4rem 10rem;
  background-image: url(./images/bg-pattern-desktop.svg);
  background-size: cover;
  background-position: center;
  width: 60%;
}

.l-content {
  margin-top: 7rem;
}

.main-img {
}


.s-head {
  color: var(--ds-red);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 4rem;
  letter-spacing: 1.2rem;
}

h1 {
  font-size: 4rem;
  letter-spacing: 1.2rem;
  text-transform: uppercase;
  color: var(--dg-red);
  font-weight: 400;
}

p {
  color: var(--ds-red);
  text-emphasis: left;
  width: 30rem;
  line-height: 1.3rem;
  margin-top: 1.5rem;
}

@media screen and (max-width:1070px){/* <== You sould change this to what you want.*/
html .layout{
flex-direction:column;
  }
  
  @media screen and(min-width:1017px){ /* <== You sould change this to what you want.*/
    html .layout{
      flex-direction:row;
    }
  }

    <div class="layout">
      <div class="left-sect">
        <img class="logo" src="https://image.shutterstock.com/image-vector/dots-letter-c-logo-design-260nw-551769190.jpg" alt="site logo" />
        <div class="l-content">
          <h1 class="s-head">We're</h1>
          <h1>
            Coming <br />
            Soon
          </h1>
          <p>
            Hello fellow shoppers! We're currently building our new fashion
            store. Add your email below to stay up-to-date with announcements
            and our launch deals.
          </p>
          <input type="email" class="main-form" />
          <button type="submit">
            <img src="./images/icon-arrow.svg" alt="form button arrow" />
          </button>
        </div>
      </div>

      <div class="right-sect">
        <img class="main-img" src="https://image.shutterstock.com/image-vector/dots-letter-c-logo-design-260nw-551769190.jpg" alt="" />
      </div>