【发布时间】：2019-05-29 14:27:58
【问题描述】：
我希望我的图像在平板电脑/台式机上重叠两个部分，但在移动设备上不重叠。目前，它正在这样做，但它导致图像与第一部分中的文本重叠。
我尝试在最小宽度为 768px 时向图像添加“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>
/*------------------------------------*\
#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;
}
}
在平板电脑/台式机上，我希望第一部分有足够的空间来容纳一半的图像。图片的一半应该在英雄部分，一半应该在奖品部分。
【问题讨论】：