1

Context:

I'm trying to simulate a "jumbotron" but not really, because instead of one big image, I need two images splitting the size of the jumbotron. The code I have below works well on screen sizes "sm" and up in Bootstrap lingo.

For screen size "xs", instead of splitting the jumbotron, I want to now stack it. Herein lies the problem, because somehow the space created by the CSS jumbotron-home-gap renders differently for the first image and the second image.

Please help thanks!

View:

<%= render "layouts/jumbotronhome", obj: "snowsports" %>
<%= render "layouts/jumbotronhome", obj: "outdoors" %>

Partial:

<div class="col-xs-12 col-sm-6 jumbotron cta" style="background-image: url(<%= asset_path "#{obj}.jpg" %>)">
  <div class="container">
    <div class="row jumbotron-home-gap">
      <p><a class="btn btn-primary btn-lg cta-button" id="cta-button" href="/<%= obj %>" role="button">Rent <%= obj %> gear</a></p>
    </div>
    <a name="how-to"></a>
  </div> 
</div>

CSS:

@media only screen and (min-width : 320px) {
  .jumbotron-home-gap {
    padding-top: 40%;
  }
}

@media only screen and (min-width : 768px){
  .jumbotron-home-gap {
    padding-top: 70%;
  }
}

Photos:

320 px screen: enter image description here

768 px screen: enter image description here

HTML generated:

<div class="col-xs-12 col-sm-6 jumbotron cta" style="background-image: url(/assets/snowsports.jpg)">
  <div class="container">
    <div class="row jumbotron-home-gap">
      <p><a class="btn btn-primary btn-lg cta-button" id="cta-button" href="/snowsports" role="button">Rent snowsports gear</a></p>
    </div>
    <a name="how-to"></a>
  </div> 
</div>

<div class="col-xs-12 col-sm-6 jumbotron cta" style="background-image: url(/assets/outdoors.jpg)">
  <div class="container">
    <div class="row jumbotron-home-gap">
      <p><a class="btn btn-primary btn-lg cta-button" id="cta-button" href="/outdoors" role="button">Rent outdoors gear</a></p>
    </div>
    <a name="how-to"></a>
  </div> 
</div>
james
  • 3,989
  • 8
  • 47
  • 102

1 Answers1

0

Figured out what was happening. Bootstrap's fixed navbars overlap content, therefore a padding is required. This was always a problem, but only in the mobile stacked version was it noticeable. Fixed by adding: 

body { padding-top: 50px; /* default navbar size */ }

Credit to this answer: twitter bootstrap navbar fixed top overlapping site

Community
  • 1
  • 1
james
  • 3,989
  • 8
  • 47
  • 102