Question

我希望图像在平板电脑/台式机上重叠两个部分，但在移动设备上不重叠。目前，它正在这样做，但会导致图像与第一部分中的文本重叠。

当最小宽度为768px时，我尝试在图像上添加“ margin-top：-226px”（但同样，它与first / hero部分中的文本重叠）。

<!-- #HERO -->  

  <div class="hero-bg center-text">
    <div class="center-container">
      <h2 class="join">
        <span class="join-the">Join The</span>
        <img class="shelf-squad-logo" src="https://shelfstuff.staging.thisismess.io/wp-content/plugins/readraterewards/static/img/logo-self-squad.svg">
      </h2>
      <h1 class="rate-read-rewards">
        <img class="read-rate-rewards-logo" src="https://shelfstuff.staging.thisismess.io/wp-content/plugins/readraterewards/static/img/logo-read-rate-review.svg">
      </h1>
      <p class="enter-for-a-chance">Enter for a chance to win a Shelf Squad Summer Reading prize pack!</p>
      <p class="read-or-listen-to-excerpt">
        Read or listen to an excerpt of any book below and submit a review for a chance to win. Not able to read or listen? Visit the official rules here on how to send in a write-in entry.
      </p>
    </div>
  </div>

<!-- #PRIZES -->

  <div class="prize-bg center-text">
    <div class="center-container">
      <img class="prize-pack" src="https://storage.googleapis.com/shelfstuff-staging/uploads/2019/05/210d080f-thumbnail-1.jpg">
      <p class="grand-prize">Grand Prize</p>
      <h2 class="grand-prize-desc">One grand prize winner every two weeks will receive a Shelf Squad prize pack including:</h2>
      <ul>
        <li class="prize-bullet">A set of amazing FREE books</li>
        <li class="prize-bullet">1 Shelf Stuff tote bag</li>
        <li class="prize-bullet">1 $50 gift card</li>
        <li class="prize-bullet">1 Shelf Stuff pin</li>
        <li class="prize-bullet">1 Shelf Stuff activity book</li>
      </ul>
    </div>
  </div>

/*------------------------------------*\
  #UNIVERSAL
\*------------------------------------*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.center-container {
  max-width: 1220px;
  padding: 40px;
  margin: 0 auto;
}

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

ul {
  color: white;
  margin-top: 24px;
  font-weight: 700;
  font-size: 18px;
  line-height: 30px;
  list-style: none;
  text-align: left;
}

li {
  padding-left: 18px;
}


/*------------------------------------*\
  #HERO
\*------------------------------------*/

.hero-bg {
  background: blue;
}

.join-the {
  color: white;
  text-transform: uppercase;
  font-size: 21px;
  font-weight: 900;
  display: block;
}

.read-rate-rewards-logo {
  margin: 45px auto 40px auto;
}

.enter-for-a-chance {
  color: white;
  font-size: 36px;
  font-weight: 700;
  line-height: 48px;
  margin: 14px 0;
}

.read-or-listen-to-excerpt {
  color: white;
  font-weight: 700;
  font-size: 20px;
  line-height: 31px;
  max-width: 632px;
  margin: 1em auto;
}

/*------------------------------------*\
  #PRIZES
\*------------------------------------*/

.prize-bg {
  background: orange;
}

.grand-prize {
  color: var(--purple-color);
  text-transform: uppercase;
  margin: 33px auto;
  font-weight: 900;
  font-size: 24px;
}

.grand-prize-desc {
  color: white;
  font-weight: 700;
  font-size: 36px;
  line-height: 55px;
}


/*------------------------------------*\
  #UTILITY
\*------------------------------------*/

.center-text {
  text-align: center;
}

/*------------------------------------*\
  #RESPONSIVE
\*------------------------------------*/

@media only screen and (min-width: 768px) {
  .container {
    max-width: 1300px;
  }

  .prize-pack {
    margin-top: -226px;
  }
}

在平板电脑/台式机上，我希望第一部分有足够的空间来容纳一半的图像。图片的一半应在英雄中，一半应在奖品部分。

this is what I want it to look like

Answer 1

克雷格（Craig）值得一游...引导程序。移动优先，100％响应框架。掌握网格！

Get Bootstrap

Answer 2

也许这段代码对您有帮助

您可以在横幅部分中添加简单的填充，因为下一部分您将讨论页边距顶部：-某些东西并没有扩大高度（横幅内容）。因此您需要在横幅底部添加一些填充。

简单的代码

/*------------------------------------*\
  #UNIVERSAL
\*------------------------------------*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.center-container {
  max-width: 1220px;
  padding: 40px;
  margin: 0 auto;
}

img {
  max-width: 100%;
  height: auto;
}

ul {
  color: white;
  margin-top: 24px;
  font-weight: 700;
  font-size: 18px;
  line-height: 30px;
  list-style: none;
  text-align: left;
}

li {
  padding-left: 18px;
}


/*------------------------------------*\
  #HERO
\*------------------------------------*/

.hero-bg {
  background: blue;
  padding-bottom: 200px;
}

.join-the {
  color: white;
  text-transform: uppercase;
  font-size: 21px;
  font-weight: 900;
  display: block;
}

.read-rate-rewards-logo {
  margin: 45px auto 40px auto;
}

.enter-for-a-chance {
  color: white;
  font-size: 36px;
  font-weight: 700;
  line-height: 48px;
  margin: 14px 0;
}

.read-or-listen-to-excerpt {
  color: white;
  font-weight: 700;
  font-size: 20px;
  line-height: 31px;
  max-width: 632px;
  margin: 1em auto;
}

/*------------------------------------*\
  #PRIZES
\*------------------------------------*/

.prize-bg {
  background: orange;
}

.grand-prize {
  color: var(--purple-color);
  text-transform: uppercase;
  margin: 33px auto;
  font-weight: 900;
  font-size: 24px;
}

.grand-prize-desc {
  color: white;
  font-weight: 700;
  font-size: 36px;
  line-height: 55px;
}


/*------------------------------------*\
  #UTILITY
\*------------------------------------*/

.center-text {
  text-align: center;
}

/*------------------------------------*\
  #RESPONSIVE
\*------------------------------------*/

@media only screen and (min-width: 768px) {
  .container {
    max-width: 1300px;
  }

  .prize-pack {
    margin-top: -226px;
  }
}

<!-- #HERO -->  

  <div class="hero-bg center-text">
    <div class="center-container">
      <h2 class="join">
        <span class="join-the">Join The</span>
        <img class="shelf-squad-logo" src="https://shelfstuff.staging.thisismess.io/wp-content/plugins/readraterewards/static/img/logo-self-squad.svg">
      </h2>
      <h1 class="rate-read-rewards">
        <img class="read-rate-rewards-logo" src="https://shelfstuff.staging.thisismess.io/wp-content/plugins/readraterewards/static/img/logo-read-rate-review.svg">
      </h1>
      <p class="enter-for-a-chance">Enter for a chance to win a Shelf Squad Summer Reading prize pack!</p>
      <p class="read-or-listen-to-excerpt">
        Read or listen to an excerpt of any book below and submit a review for a chance to win. Not able to read or listen? Visit the official rules here on how to send in a write-in entry.
      </p>
    </div>
  </div>

<!-- #PRIZES -->

  <div class="prize-bg center-text">
    <div class="center-container">
      <img class="prize-pack" src="https://storage.googleapis.com/shelfstuff-staging/uploads/2019/05/210d080f-thumbnail-1.jpg">
      <p class="grand-prize">Grand Prize</p>
      <h2 class="grand-prize-desc">One grand prize winner every two weeks will receive a Shelf Squad prize pack including:</h2>
      <ul>
        <li class="prize-bullet">A set of amazing FREE books</li>
        <li class="prize-bullet">1 Shelf Stuff tote bag</li>
        <li class="prize-bullet">1 $50 gift card</li>
        <li class="prize-bullet">1 Shelf Stuff pin</li>
        <li class="prize-bullet">1 Shelf Stuff activity book</li>
      </ul>
    </div>
  </div>

在平板电脑/台式机上设置图像重叠部分，但在移动设备上不重叠

2 个答案: