更改两个上框大小的问题 (text/image)

Question

我正在努力使我的网站具有响应能力并适用于移动设备，iPad 它似乎运行良好，但对于桌面设备我遇到了问题。我想弄清楚如何扩展上面的两个框（图像和文本）。我的网站现在看起来像这样：

但结果应该如左图所示：

这是我的 HTML 上面两个框：

@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&family=Montserrat:wght@100&family=Open+Sans+Condensed:wght@300;700&display=swap');
body {
  margin: 0%;
  font-family: 'Montserrat', sans-serif;
  background-color: #f2f2f0;
}


/* Header  */

header {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  color: #d0c8b6;
}

a {
  text-decoration: none;
}

.headertext {
  font-family: 'Amatic SC', cursive;
  font-size: 50px;
  margin-right: 40px;
}

.title {
  display: flex;
  font-family: 'Amatic SC', cursive;
}

.logo {
  width: 80px;
  border-radius: 50%;
  margin-left: 40px;
}


/*  The bigger news   */

nav {
  display: none;
  font-size: 14px;
}

nav div {
  width: 30%;
  display: flex;
  justify-content: space-between;
}

.header-box {
  display: flex;
  margin: 0%;
  justify-content: center;
}


/* The other news   */

.flex-parent1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.flex-parent2 {
  display: flex;
  height: 100px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.child1 {
  margin-bottom: 20px;
}

.image {
  height: auto;
  width: auto;
  display: inline;
}

.text {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 0px;
  width: 350px;
  text-align: justify;
}

.footer-text {
  color: black;
  font-size: 14px;
  margin-top: 5px;
  margin-bottom: 8px;
  text-transform: uppercase;
  text-align: center;
}

.date {
  text-align: center;
  margin-top: 5px;
  font-size: 10px;
}

.image {
  width: 350px;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-left: 10px;
  margin-right: 10px;
}

.image1 {
  width: 350px;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-left: 10px;
  margin-right: 10px;
}


/* Mobile */

@media (min-width: 668px) {
  header {
    justify-content: center;
  }
  nav {
    width: 80%;
    display: flex;
    justify-content: space-between;
  }
  .headertext {
    display: none;
  }
  .title {
    display: none;
  }
  .menu {
    display: none;
  }
  .logo {
    position: absolute;
  }
}


/* Desktop */

@media (min-width: 1025px) {
  header {
    justify-content: space-between;
  }
  nav {
    width: 60%;
    justify-content: space-evenly;
  }
  .logo {
    position: static;
  }
  .headertext {
    display: block;
  }
}

<div class="flex-parent1">

  <div class="child1">
    <img class="image" src="https://images.pexels.com/photos/5581939/pexels-photo-5581939.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="image1" />
  </div>

  <div class="child2">
    <p class="text">Tourism is travelling for pleasure or to enjoy yourself away from the place you live. People do this for many different reasons – to have fun, visit other countries and learn about other cultures or just relax from stressful working life. Tourists
      go to various destinations, countries with great landmarks, places with lovely beaches or simply areas of wilderness and untouched nature. In the last few decades tourism has grown very much, mostly because people’s lifestyles have changed. They
      don’t want to stay at home any more. They spend more money on travelling than previous generations did. Travelling has also become cheaper and more affordable. The rise of budget airlines has made it possible to afford trips to faraway countries.
      Tourism is travelling for pleasure or to enjoy yourself away from the place you live. People do this for many different reasons – to have fun, visit other countries and learn about other cultures or just relax from stressful working life. he rise
      of budget airlines has made it possible to afford trips to faraway countries. about other cultures or just relax from stressful working life. he rise of budget airlines has made it possible to.</p>
  </div>

</div>

Answer 1

如果您所说的“扩展”是指将它们排成一行以用于更大的屏幕，则只需将弹性方向默认设置为 row，并且您已经为移动设备覆盖了它。

在全屏模式下查看此演示并调整大小。

@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&family=Montserrat:wght@100&family=Open+Sans+Condensed:wght@300;700&display=swap');
body {
  margin: 0%;
  font-family: 'Montserrat', sans-serif;
  background-color: #f2f2f0;
}


/* Header  */

header {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  color: #d0c8b6;
}

a {
  text-decoration: none;
}

.headertext {
  font-family: 'Amatic SC', cursive;
  font-size: 50px;
  margin-right: 40px;
}

.title {
  display: flex;
  font-family: 'Amatic SC', cursive;
}

.logo {
  width: 80px;
  border-radius: 50%;
  margin-left: 40px;
}


/*  The bigger news   */

nav {
  display: none;
  font-size: 14px;
}

nav div {
  width: 30%;
  display: flex;
  justify-content: space-between;
}

.header-box {
  display: flex;
  margin: 0%;
  justify-content: center;
}


/* The other news   */

.flex-parent1 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.flex-parent2 {
  display: flex;
  height: 100px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.child1 {
  margin-bottom: 20px;
}

.image {
  height: auto;
  width: auto;
  display: inline;
}

.text {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 0px;
  width: 350px;
  text-align: justify;
}

.footer-text {
  color: black;
  font-size: 14px;
  margin-top: 5px;
  margin-bottom: 8px;
  text-transform: uppercase;
  text-align: center;
}

.date {
  text-align: center;
  margin-top: 5px;
  font-size: 10px;
}

.image {
  width: 350px;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-left: 10px;
  margin-right: 10px;
}

.image1 {
  width: 350px;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-left: 10px;
  margin-right: 10px;
}


/* Mobile */

@media (min-width: 668px) {
  header {
    justify-content: center;
  }
  nav {
    width: 80%;
    display: flex;
    justify-content: space-between;
  }
  .headertext {
    display: none;
  }
  .title {
    display: none;
  }
  .menu {
    display: none;
  }
  .logo {
    position: absolute;
  }
}


/* Desktop */

@media (min-width: 1025px) {
  header {
    justify-content: space-between;
  }
  nav {
    width: 60%;
    justify-content: space-evenly;
  }
  .logo {
    position: static;
  }
  .headertext {
    display: block;
  }
}

<div class="flex-parent1">
  <div class="child1">
    <img class="image" src="https://images.pexels.com/photos/5581939/pexels-photo-5581939.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="image1" />
  </div>

  <div class="child2">
    <p class="text">Tourism is travelling for pleasure or to enjoy yourself away from the place you live. People do this for many different reasons – to have fun, visit other countries and learn about other cultures or just relax from stressful working life. Tourists
      go to various destinations, countries with great landmarks, places with lovely beaches or simply areas of wilderness and untouched nature. In the last few decades tourism has grown very much, mostly because people’s lifestyles have changed. They
      don’t want to stay at home any more. They spend more money on travelling than previous generations did. Travelling has also become cheaper and more affordable. The rise of budget airlines has made it possible to afford trips to faraway countries.
      Tourism is travelling for pleasure or to enjoy yourself away from the place you live. People do this for many different reasons – to have fun, visit other countries and learn about other cultures or just relax from stressful working life. he rise
      of budget airlines has made it possible to afford trips to faraway countries. about other cultures or just relax from stressful working life. he rise of budget airlines has made it possible to.</p>
  </div>
</div>

更改两个上框大小的问题 (text/image)

Problems with changing the size of the two upper boxes ( text/image)

css

responsive-design