CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
AKD40
AKD40

Reputation: 33

Bootstrap rows overlapping

I am trying to make a page that has two sections that stack on top of each other using rows. Each section is supposed to be the height of the browser window but for some reason the second row overlaps most of the first except for the header.

Here is a link to my code: http://www.bootply.com/WwcepyZC01

Upvotes: 0

Views: 1334

Answers (1)

RPL
RPL

Reputation: 3627

If I understand your question correctly, you can do this using height: 100vh, and remove the position: absolute. I've also restructured your HTML a bit so that .layer2 is not a child of .layer1.

.layer1 {
  width: 100%;
  height: 100vh;
  background-image: url(<%=asset_path "home_bg.jpg"%>);
  background-size: cover;
  background-color: purple;
}
.title-wide h1 {
  top: 10%;
  left: 10%;
  right: 10%;
  color: #ffffff;
  font-size: 10vmax;
}
.home-caption {
  position: absolute;
  left: 20%;
  right: 20%;
  top: 30%;
}
.title-wide h2 {
  color: #ffffff;
  font-size: 4vmax;
}
.col-md-7 {
  position: absolute;
  text-align: center;
  left: 15%;
  right: 15%;
  height: 100%;
  top: 50%;
  font-size: 10vw;
}
.btn-default {
  background: rgba(255, 255, 255, 0.8);
}
.title-wide {
  left: 90%;
  right: 90%;
}
.btn-xlarge {
  padding: 20px 20px;
  font-weight: 700;
  line-height: normal;
  border-radius: 200px;
  border: 2px solid none;
  text-align: center center;
  height: 3em;
  font-size: 25px;
  width: 10em;
}
.layer2 {
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-color: green;
}
<div class="layer1 row-fluid">
  <div class="title-wide text-center">
    <h1>My Name</h1>
    <div class="home-caption text-center">
      <h2>I am a person working for a nameless corporation</h2>
      <div class="row">
        <hr>
        <div class="offset4">
        </div>
      </div>
    </div>
  </div>
</div>

<div class="layer2 row-fluid">

</div>


<div id="push"></div>

Upvotes: 2

Related Questions