html - Navbar cuts into Carousel images -


looks i've got problem , i'm not sure next step. think i've beaten head against css wall position, margin, padding, , like.

i need move carousel below navbar , yet keep them both fixed...any ideas?

code:

.carousel-inner .carousel-item {    width: 100%;    height: 500px;    -webkit-background-size: cover;    -moz-background-size: cover;    -o-background-size: cover;    background-size: cover;  }    .hero1 {    background: url(hero.jpg) no-repeat center center fixed;   }  .hero2 {    background: url(hero2.jpg) no-repeat center center fixed;   }  .hero3 {    background: url(hero3.jpg) no-repeat center center fixed;   }    .navbar {    font-family: "helvetica neue", helvetica;    font-weight: 200;    box-shadow: 0px 1px 3px #2a2a2a;  }    .navbar-inverse a.navbar-brand {    font-family: "helvetica neue", helvetica;    font-weight: 100;    color: white;  }
    <div id="carousel" class="carousel slide" data-ride="carousel">        <ol class="carousel-indicators">          <li data-target="#carousel" data-slide-to="0" class="active"></li>          <li data-target="#carousel" data-slide-to="1"></li>          <li data-target="#carousel" data-slide-to="2"></li>        </ol>        <div class="carousel-inner" role="listbox">          <div class="carousel-item hero1 active">            <img class="d-block img-fluid">          </div>          <div class="carousel-item hero2">            <img class="d-block img-fluid">          </div>          <div class="carousel-item hero3">            <img class="d-block img-fluid">          </div>        </div>        <a class="carousel-control-prev" href="#carouselexampleindicators" role="button" data-slide="prev">          <span class="carousel-control-prev-icon" aria-hidden="true"></span>          <span class="sr-only">previous</span>        </a>        <a class="carousel-control-next" href="#carouselexampleindicators" role="button" data-slide="next">          <span class="carousel-control-next-icon" aria-hidden="true"></span>          <span class="sr-only">next</span>        </a>      </div>

https://github.com/peterbehere/christ_the_king_fellowship_app.git

update: figured out! first, removed css pointed images. then, replaced html img class rails image_tag helpers. works!

  <div class="carousel-inner" role="listbox">     <div class="carousel-item active">       <%= image_tag "hero.jpg", :id =>"hero1",  :class =>"d-block img-fluid" %>     </div>     <div class="carousel-item">       <%= image_tag "hero2.jpg", :id =>"hero2",  :class =>"d-block img-fluid" %>     </div>     <div class="carousel-item">       <%= image_tag "hero3.jpg", :id =>"hero3",  :class =>"d-block img-fluid" %>     </div> 

Comments

Popular posts from this blog

How to understand 2 main() functions after using uftrace to profile the C++ program? -

c# - Update a combobox from a presenter (MVP) -

How to put a lock and transaction on table using spring 4 or above using jdbcTemplate and annotations like @Transactional? -