Я хочу, чтобы мое изображение перекрывало два раздела на планшете / рабочем столе, но не на мобильном телефоне. В настоящее время он делает это, но заставляет изображение перекрывать текст в первом разделе.

Я попытался добавить "margin-top: -226px" к изображению, когда min-width 768px (но опять же, оно перекрывает текст в разделе 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;
  }
}

На планшете / рабочем столе я бы хотел, чтобы в первом разделе было достаточно места, чтобы вместить половину изображения. Половина изображения должна быть в герое, а половина - в разделе призов.

это то, что я хочу, чтобы это выглядело

0
Craig Kleila 29 Май 2019 в 02:02

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>
0
Md. Abu Sayed 29 Май 2019 в 06:27

Крейг, это стоит запрыгнуть ... Бутстрап. Mobile first, 100% отзывчивый фреймворк. Мастер сетки!

Получить Bootstrap

1
Derek Manson 28 Май 2019 в 23:13
56351081