CODEWITHSUNDEEP
htmlcss
Craig Kleila
Craig Kleila

Reputation: 9

Make image overlap sections on tablet/desktop but not on mobile

I want my image to overlap two sections on tablet/desktop but not on mobile. Currently, it's doing so but it's causing the image to overlap the text in the first section.

I've tried adding "margin-top: -226px" to the image when the min-width is 768px (but again, it overlaps the text in the first/hero section).

<!-- #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;
  }
}

On tablet/desktop, I would like there to be enough room in the first section to fit half of the image. Half of the image should be in the hero and half should be in the prizes section.

this is what I want it to look like

Upvotes: 0

Views: 129

Answers (2)

Md. Abu Sayed
Md. Abu Sayed

Reputation: 2486

Maybe this code help you

you can add simple padding in the banner section because of the next section you talk the margin-top: -something then it's not expanding height(banner content). so you needed some padding in the banner bottom.

Here the simple code 

/*------------------------------------*\
  #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>

Upvotes: 0

Derek Manson
Derek Manson

Reputation: 84

Craig it's worth jumping into ... Bootstrap. Mobile first, 100% responsive framework. Master the grid!

Get Bootstrap

Upvotes: 1

Related Questions