Margin between jumbotron and content increases when shrinking window

Question

I'm so close to finally getting my jumbotron image to shrink to fit viewport when resizing smaller, but now when I do it increases the bottom margin the smaller I make it. Easy fix?

http://codepen.io/chiggory/pen/qNGQGO

HTML

<div class="jumbotron">
    <div class="container">
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h1>Over 27,000,000</h1>
            <h4>is the current estimate of slaves worldwide. More than at any point in human history. Every 30 seconds, another person falls victim to the human trafficking industry. Often these slaves are kidnapped or sold by families under desperate circumstances. As the demand to exploit men, women and children for manual and sexual labor increases, the average age of victims continues to fall.</h4>
            <h2>We believe</h2>
            <h4>these statistics are unacceptable. These are not mere numbers, they represent lost and stolen human lives, lives which we are relentlessly fighting for. Together we are investing our lives, devoting our unique skills and resources to bring justice and freedom to those that desperately need it, both locally, here in Buena Vista, CO, and globally. </h4>
            <br>
            <h4>Get involved and be their voice!</h4>
        </div>
    </div>
</div>

CSS

.jumbotron {
    background-image:url('http://4.bp.blogspot.com/-CIy9X0Vwlko/VFvyStJbP_I/AAAAAAAACys/Ze7QVlcVmX0/s1600/HOPE%2BLogo%2Bcopy.jpg');
    height: 600px;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #FFFFFF;
    position: relative;
}
.jumbotron .container {
    position: relative;
    top:100px;
}
.jumbotron h1 {
      color: #fff;
      font-size: 60px;  
      font-family: 'Love Ya Like A Sister', cursive;
      font-weight: bold;
}
.jumbotron p {
    font-size: 30px;
    color: #A80000;
}

score 0 · Answer 1 · edited Aug 23 '16 at 17:40

0

Looks like I can use background size: 100% 100% from another answer. It skews the image more than contain but I can live with it.

edited Aug 23 '16 at 17:40

dippas

58,591
15
114
126

answered Aug 23 '16 at 17:38

Erich Sterzing

35
1
1
4

Trevor Nestman · Accepted Answer · 2016-08-23T20:16:15.607

I've messed around quite a bit with your code. The height: 600px for .jumbotron is throwing it off. Here's what I think you're looking for... let me know.

@media screen and (max-width: 900px) {
  body .jumbotron {
    background-size: 900px;
    background-position: left -50px center;
  }
}
.jumbotron {
    padding: 0;
  height: 90vmin; /* Here you can change the height */
  width: 100%;
    background-image:url('http://4.bp.blogspot.com/-CIy9X0Vwlko/VFvyStJbP_I/AAAAAAAACys/Ze7QVlcVmX0/s1600/HOPE%2BLogo%2Bcopy.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: #efeeec;
  background-position: left center;
  overflow: hidden;
    position: relative;
}
.jumbotron h1 {
      color: #fff;
      font-size: 60px;  
      font-family: 'Love Ya Like A Sister', cursive;
      font-weight: bold;
}
.jumbotron p {
    font-size: 30px;
    color: #A80000;
}

<div class="jumbotron">
</div>

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h1>Over 27,000,000</h1>
            <h4>is the current estimate of slaves worldwide. More than at any point in human history. Every 30 seconds, another person falls victim to the human trafficking industry. Often these slaves are kidnapped or sold by families under desperate circumstances. As the demand to exploit men, women and children for manual and sexual labor increases, the average age of victims continues to fall.</h4>
            <h2>We believe</h2>
            <h4>these statistics are unacceptable. These are not mere numbers, they represent lost and stolen human lives, lives which we are relentlessly fighting for. Together we are investing our lives, devoting our unique skills and resources to bring justice and freedom to those that desperately need it, both locally, here in Buena Vista, CO, and globally. </h4>
            <br>
            <h4>Get involved and be their voice!</h4>
        </div>
    </div>
</div>

Thanks so much for spending time on this. I think we'll get crucified for using !important but let me mess around with it. I need to look up what @media does, too — Erich Sterzing, Aug 23 '16 at 19:17
updated so you don't have to use !important. `@media` I used this so that the image doesn't change the image size when it reaches a certain screen width size. I did this because the image gets really small if the screen gets too small. — Trevor Nestman, Aug 23 '16 at 20:16

Margin between jumbotron and content increases when shrinking window

2 Answers2