响应列图片和段落答案

【问题标题】：Responsive Column Img and Paragraph响应列图片和段落
【发布时间】：2022-01-16 12:50:27
【问题描述】：

我有一个网站，我想要左边的图片和右边的段落。然后当屏幕较小时，我希望图像在顶部，段落在底部。

这很简单，我以前做过，但由于某种原因它不起作用。我已经用谷歌搜索/查看了其他示例，但似乎无法确定问题所在。有人可以帮忙吗？我确定这很简单，我只是没看到。

HTML：

  <h1>About</h1>
  <div class="wrapper">
  <img src="image.jpg" alt="image" id="img-about">
  <p id="text-about">Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias perspiciatis asperiores in aliquid repudiandae blanditiis recusandae molestiae nemo itaque inventore velit illum vel voluptatibus, eveniet repellat facilis consectetur veritatis deleniti explicabo ducimus! Debitis numquam unde necessitatibus esse sed. Earum accusamus itaque autem reiciendis aliquam laboriosam sint rem illo explicabo culpa?</p>
</div>

CSS：

.wrapper {
  display: flex;
  flex-direction: row;
}

#about-img {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  padding: 10px;
  margin-right: 15px;
}

#text-about {
  font-size: 14px;
  margin: auto;
  padding: 5px;
}

@media (max-width: 800){
  .wrapper {
    flex-direction: column;
  }
}

【问题讨论】：

将其更改为 (max-width: 800px) 应该可以。

标签： html css flexbox responsive

【解决方案1】：

您的媒体查询缺少计量单位。

改变

@media (max-width: 800){
  .wrapper {
    flex-direction: column;
  }
}

到

@media (max-width: 800px){
  .wrapper {
    flex-direction: column;
  }
}

【讨论】：

天哪，就是这样。谢谢。
太棒了。请点击复选标记接受答案。

【解决方案2】：

您缺少用于媒体查询的单元。

 @media (max-width: 800px)

.wrapper {
  display: flex;
  flex-direction: row;
}

#about-img {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  padding: 10px;
  margin-right: 15px;
}

#text-about {
  font-size: 14px;
  margin: auto;
  padding: 5px;
}

@media (max-width: 800px){
  .wrapper {
    flex-direction: column;
  }
}

 <h1>About</h1>
  <div class="wrapper">
  <img src="https://images.pexels.com/photos/586744/pexels-photo-586744.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="image" id="img-about">
  <p id="text-about">Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias perspiciatis asperiores in aliquid repudiandae blanditiis recusandae molestiae nemo itaque inventore velit illum vel voluptatibus, eveniet repellat facilis consectetur veritatis deleniti explicabo ducimus! Debitis numquam unde necessitatibus esse sed. Earum accusamus itaque autem reiciendis aliquam laboriosam sint rem illo explicabo culpa?</p>
</div>

【讨论】：

【解决方案3】：

您忘记为媒体查询添加“px”。 800px，然后就可以了。

【讨论】：