Question

我有两个大的H1元素，当屏幕很大时我会彼此相邻，然后在屏幕尺寸较小时将一个上面的元素移到另一个上面。我想我可以尽可能简单地使用CSS，但我遇到了麻烦。使用下面的代码，当屏幕较小时，文本将溢出相互叠加。

HTML：

<div class="bigCTA">
  <div class="numbers" style="text-align: center;">
    <h1 id="numEvents" class="title">3,500+</h1>
    <br>
    <sm class="events-text">Events Held</sm>
  </div>

  <div class="numbers">
    <h1 class="title" style="margin-left: 25px;">$275M+</h1>
  <br>
    <sm class="events-text" style="margin-left: 25px;">Raised</sm>
  </div>
</div>

CSS：

.numbers {
  display: inline-block;
  width: 33%;
  padding: 5%;
}

.events-text {
  font-size: 20px;
  text-align: center;
  position: relative;
  top: -40px;
}

.title {
  display: inline-block;
  margin: 8% auto;
  font-size: 80px;
  padding: 8%;
}

.bigCTA {
  display: inline-block;
  text-align: center;
  width: 90%;
}

Answer 1

最简单的答案是使用MEDIA QUERIES：

@media(max-width: 768px) {
  .numbers {
    width: 100%;
  }
}

这意味着..如果网站的宽度等于或小于768，那么它将使用它而不是原始的CSS ..

Answer 2

您只需使用媒体查询即可。你可以阅读它here。

现在你的问题。我正在编辑你的代码并试图让它变得非常简单。您可以看到我的更改并与您的代码进行比较。（html是一样的）

希望这对你有所帮助。

<强> HTML：

<div class="bigCTA">
  <div class="numbers" style="text-align: center;">
    <h1 id="numEvents" class="title">3,500+</h1>
    <br>
    <sm class="events-text">Events Held</sm>
  </div>

  <div class="numbers">
    <h1 class="title" style="margin-left: 25px;">$275M+</h1>
  <br>
    <sm class="events-text" style="margin-left: 25px;">Raised</sm>
  </div>
</div>

<强> CSS：

h1 {
  margin: 0;
}

.numbers {
  display: inline-block;
  float: left;
  width: 50%;
}

.events-text {
  position: relative;
  top: -20px;
  font-size: 20px;
}

.title {
  font-size: 80px;
}

.bigCTA {
  display: block;
  text-align: center;
  width: 90%;
}

@media (max-width: 600px) {
  .numbers {
    width: 100%;
  }
}

Working Fiddle

当屏幕尺寸较小时，需要CSS文本不会溢出H1文本

2 个答案: