How to control the dimensions of the class div class="overlay" / div from Bootstrap

Navigation
0

The problem I have is that when I have the page in full screen I can see perfectly the layer that darkens the image and the slider, but when I go to look at the page in the mobile, this part that goes dark has a fixed dimension and lack opacity in the top and bottom, if you could help me would be very thankful, here I leave the HTML and CSS code that I have: 

.fonsimg {
    position: absolute;
    width: 100%;
    z-index: 2;
    background-color: #080d15;
    opacity: .7;
}
 <section id="twitter" class="parallax">
    <div class="fonsimg">
      <a class="twitter-left-control" href="#twitter-carousel" role="button" data-slide="prev"><i class="fa fa-angle-left"></i></a>
      <a class="twitter-right-control" href="#twitter-carousel" role="button" data-slide="next"><i class="fa fa-angle-right"></i></a>
    <div class="container">
        <div class="row">
          <div class="col-sm-8 col-sm-offset-2">
            <div class="uni4 text-center">
              <i><img style="background-color: #080d15;" src="https://www.gravatar.com/avatar/7f364aec7e35f0ec454bb6454869de7d?s=32&d=identicon&r=PG&f=1" alt=""></i>
              <h2>Lorem Ipsum</h2>
            </div>
            <div id="twitter-carousel" class="carousel slide" data-ride="carousel">
              <div class="carousel-inner">
                <div class="item active wow fadeIn" data-wow-duration="1000ms" data-wow-delay="300ms">
                  <h4>Lorem Ipsum</h4>
                </div>
               <!-- <div class="item">
                  <H4>Lorem Ipsum</H4>
                </div>-->
                <div class="item">
                  <H4>Lorem Ipsum</H4>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
    
asked by kikegg9 06.03.2017 в 20:30
source

1 answer

0

Your items are not high, try to stop the html and the body of 100% and then all the elements that are inside. It also removes the margin and the padding of body to remove the space between it and the edge of the window, example:

  

Put the snippet full screen so you can see the difference.

CSS Code: 

html,
body {
  height: 100%;
}

body {
    margin: 0;
    padding: 0;
}

#twitter,
.fonsimg {
  height: 100%;
}

.fonsimg {
  position: absolute;
  width: 100%;
  z-index: 2;
  background-color: #080d15;
  opacity: .7;
}
<section id="twitter" class="parallax">
  <div class="fonsimg">
    <a class="twitter-left-control" href="#twitter-carousel" role="button" data-slide="prev"><i class="fa fa-angle-left"></i></a>
    <a class="twitter-right-control" href="#twitter-carousel" role="button" data-slide="next"><i class="fa fa-angle-right"></i></a>
    <div class="container">
      <div class="row">
        <div class="col-sm-8 col-sm-offset-2">
          <div class="uni4 text-center">
            <i><img style="background-color: #080d15;" src="https://www.gravatar.com/avatar/7f364aec7e35f0ec454bb6454869de7d?s=32&d=identicon&r=PG&f=1" alt=""></i>
            <h2>Lorem Ipsum</h2>
          </div>
          <div id="twitter-carousel" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
              <div class="item active wow fadeIn" data-wow-duration="1000ms" data-wow-delay="300ms">
                <h4>Lorem Ipsum</h4>
              </div>                  
              <div class="item">
                <H4>Lorem Ipsum</H4>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
    
answered by 06.03.2017 в 20:51
Windows Form: xlWorkBook.SaveAs difference between .classList and .class