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
Post a Comment