文本与图片失去移动端响应式，排查display:flex无果求协助

从你提供的代码片段和问题描述来看，以下几个点可能是导致文本、图片失去移动端响应式的核心原因，对应修复方案如下：

1. 固定margin挤压移动端可用空间 #

.coming-soon设置的margin-left: 3rem和margin-right: 3rem是固定值，在小屏设备下会占用过多水平空间，导致内容被挤压甚至溢出视口。可以改用百分比或媒体查询做适配：

.coming-soon {
  min-height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  /* 用百分比替代固定rem，适配不同屏幕宽度 */
  margin-left: 5%;
  margin-right: 5%;
}

/* 针对移动端单独调整更紧凑的边距 */
@media (max-width: 768px) {
  .coming-soon {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

2. Flex容器未开启换行，子元素横向溢出 #

.countdown作为flex容器，默认flex-wrap: nowrap，如果倒计时的数字、文本子元素总宽度超过移动端视口，会直接横向溢出破坏布局。添加换行属性即可解决：

.countdown {
  display: flex;
  justify-content: center;
  text-align: center;
  font-family: "Recoleta", serif;
  /* 允许子元素在空间不足时自动换行 */
  flex-wrap: wrap;
  /* 可选：添加子元素间距，提升移动端可读性 */
  gap: 1rem;
}

3. 检查viewport元标签（响应式基础） #

如果HTML头部没有添加viewport元标签，浏览器会以桌面端视口渲染页面，直接导致所有响应式设置失效。确保<head>里包含：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

额外适配建议 #

• 给图片添加自适应属性，避免图片超出容器宽度：

img {
  max-width: 100%;
  height: auto;
}

• 文本尽量使用rem/em等相对单位，配合媒体查询调整移动端字体大小，避免文字溢出或显示过小。

内容的提问来源于stack exchange，提问作者Louise Chan