响应列 Img 和段落

Question

我有一个网站，我想要左边的图片和右边的段落。然后当屏幕变小的时候我想要图片在上面，段落在下面。

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

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;
  }
}

Answer 1

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

改变

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

至

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

Answer 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>

Answer 3

您忘记为媒体查询添加 'px'。 800px，就可以了。

响应列 Img 和段落

Responsive Column Img and Paragraph

html

css

flexbox

responsive