0

estoy teniendo problemas con los CSS de esta

      // linea de tiempo jquery
        $(document).ready(function() {
        //Set the carousel options
        $('#timeline-carousel').carousel({
          pause: true,
          interval: 8000,
        });
      });
#timeline{
  background-color: #f5f5f5;
  padding-top: 88px;
  padding-bottom: 46px;
  height: 300px;
}

.steps-timeline {
  outline: 1px dashed rgba(255, 0, 0, 0);
  width: 1170px;
  border-top: 1px solid #333333;
  padding-top: 18px;
  margin: auto;
  padding-bottom: 30px;
}

.steps-span {
  display: block;
  margin: auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #333333;
}

.steps-name {
  text-align: center;
  font-size: 45px;
  color: #333333;
  font-family: 'encode_sansregular'
}

.steps-name-h3 {
  font-size: 45px;
  color: #333333;
  font-family: 'encode_sansregular'
} 

.steps-decada{
  float: left;
  margin-top: 15px;
  margin-right: 25px;
}

.check{
  float: left;
  margin-top: 10px;
  margin-right: 5px;
}

.steps-description {
  text-align:left;
  margin-top: 10px;
  font-size: 13px;
  padding-bottom: 4px;
  padding-top: 9px;

}

.steps-timeline:after {
  content: "";
  display: table;
  clear: both;
}

.steps-name,.steps-name-h3{
  margin: 0;
}

.steps-description {
  margin: 0;
  color: #333333;
  margin-left: 21px;
}
.steps-one,
.steps-two,
.steps-three {
  outline: 1px dashed rgba(0, 128, 0, 0);
}

@media screen and (min-width: 1000px) {
  .steps-one,
  .steps-two,
  .steps-three {
    float: left;
    width: 24%;
    margin-top: -72px;
  }
}

@media screen and (max-width: 1000px) {
  .steps-span {
    float: left;
    margin-right: 20px;
  }
}

/* FUNCIONES DEL ROTADOR */

#timeline-carousel .carousel-control-2{
  background: #fff;
  color: #333333;
  font-size: 3.3em;
  text-shadow: none;
  position: relative;
  top: -30px;
  z-index: 9;
}

.carousel-control-2.left {
  left: -12px;
  padding: 10px 22px;
}

.carousel-control-2.right {
  right: 0px ;
  padding: 0px 22px;
}

#timeline-carousel .carousel-indicators 
{  right: 50%;
  top: auto;
  bottom: 0px;
  margin-right: -19px;
}

#timeline-carousel .carousel-indicators li {
  background: #c0c0c0;
}

#timeline-carousel .carousel-indicators .active {
  background: #333333;
}

.item blockquote {
    border-left: none; 
    margin: 0;
}


/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { 
    #timeline-carousel 
    {
      background-color: #f5f5f5;
      margin-bottom: 0;
    }
    
}

/* Small devices (tablets, up to 768px) */
@media (max-width: 768px) { 
     
    #timeline-carousel .carousel-indicators {
        bottom: -20px !important;  
    }
    #timeline-carousel .carousel-indicators li {
        display: inline-block;
        margin: 0px 5px;
        width: 15px;
        height: 15px;
    }
    #timeline-carousel .carousel-indicators li.active {
        margin: 0px 5px;
        width: 20px;
        height: 20px;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
        <div class="container-fluid" style="padding: 0;">

          <div class="row">
            <div>
              <div class="carousel slide" data-ride="carousel" id="timeline-carousel">
                <div class="container">
                  <!-- FLECHAS TIMELINE -->
                  <a data-slide="prev" href="#timeline-carousel" class="left carousel-control-2"><i class=" arrow-left fa fa-angle-left"></i></a>
                  <a data-slide="next" href="#timeline-carousel" class="right carousel-control-2 pull-right"><i class=" arrow-right fa fa-angle-right"></i></a>

                  <!-- ROTADOR LINEA DE TIEMPO -->
                  <div class="carousel-inner">
                    
                    <!-- linea 1 -->
                    <div class="item active">
                      <blockquote>
                        <div class="row">
                          <div class="col-xs-12 col-md-12" id="timeline">
                              <div id="Steps" class="steps-section">

                                <div class="steps-timeline">

                                  <div class="steps-one">
                                    <h4 class="steps-decada hidden-xs hidden-sm">DÉCADA</h4>
                                    <h3 class="steps-name-h3">
                                      1990
                                    </h3>
                                    <span class="steps-span"></span>
                                    <img class="img-responsive check" src="images/check.svg">
                                    <p class="steps-description">
                                      En 1926 Alfredo Fortabat descubre la presencia de piedra caliza en la localidad de Loma Negra, Olavarría.
                                    </p>
                                     <img class="img-responsive check" src="images/check.svg">
                                    <p class="steps-description">En 1928 se pone en marcha la primera fábrica de cemento en el partido de Olavarría.</p>
                                  </div>

                                  <div class="steps-two">
                                    <h3 class="steps-name">
                                      1991
                                    </h3>                      
                                    <span class="steps-span"></span>
                                     <img class="img-responsive check" src="images/check.svg">
                                    <p class="steps-description">
                                       Se expande la capacidad de producción en la planta de Olavarría con un nuevo horno, y se inaugura una planta en la localidad de Barker, provincia de Buenos Aires.
                                    </p>
                                  </div>

                                  <div class="steps-three">
                                    <h3 class="steps-name">
                                      1992
                                    </h3>                      
                                    <span class="steps-span"></span>
                                    <img class="img-responsive check" src="images/check.svg">
                                    <p class="steps-description">
                                       Se suma la fábrica de San Juan.
                                    </p>
                                  </div>
                                  <div class="steps-three">
                                    <h3 class="steps-name">
                                      1993
                                    </h3>                      
                                    <span class="steps-span"></span>
                                    <img class="img-responsive check" src="images/check.svg">
                                    <p class="steps-description">
                                       Se inaugura la planta de Zapala, en la provincia de Neuquén.
                                    </p>
                                  </div>
                                </div>
                              </div>                
                          </div>
                        </div>
                      </blockquote>
                    </div>
                    <!-- linea 2 -->
                    <div class="item">
                      <blockquote>
                        <div class="row">
                          <div class="col-xs-12 col-md-12" id="timeline">
                              <div id="Steps" class="steps-section">

                                <div class="steps-timeline">

                                  <div class="steps-one">
                                    <h3 class="steps-name">
                                      1994
                                    </h3>
                                    <span class="steps-span"></span>
                                    <img class="img-responsive check" src="images/check.svg">
                                    <p class="steps-description">
                                      En 1926 Alfredo Fortabat descubre la presencia de piedra caliza en la localidad de Loma Negra, Olavarría.
                                    </p>
                                  </div>

                                  <div class="steps-two">
                                    <h3 class="steps-name">
                                      1995
                                    </h3>                      
                                    <span class="steps-span"></span>
                                    <img class="img-responsive check" src="images/check.svg">
                                    <p class="steps-description">
                                      En 1926 Alfredo Fortabat descubre la presencia de piedra caliza en la localidad de Loma Negra, Olavarría.
                                    </p>
                                  </div>

                                  <div class="steps-three">
                                    <h3 class="steps-name">
                                      1996
                                    </h3>                      
                                    <span class="steps-span"></span>
                                    <img class="img-responsive check" src="images/check.svg">
                                    <p class="steps-description">
                                      En 1926 Alfredo Fortabat descubre la presencia de piedra caliza en la localidad de Loma Negra, Olavarría.
                                    </p>
                                  </div>
                                  <div class="steps-three">
                                    <h3 class="steps-name">
                                      1997
                                    </h3>                      
                                    <span class="steps-span"></span>
                                    <img class="img-responsive check" src="images/check.svg">
                                    <p class="steps-description">
                                      En 1926 Alfredo Fortabat descubre la presencia de piedra caliza en la localidad de Loma Negra, Olavarría.
                                    </p>
                                  </div>
                                </div>
                              </div>                
                          </div>
                        </div>
                      </blockquote>
                    </div>
                    <!-- linea 3 -->                 
                    <div class="item">
                      <blockquote>
                        <div class="row">
                          <div class="col-xs-12 col-md-12" id="timeline">
                              <div id="Steps" class="steps-section">

                                <div class="steps-timeline">

                                  <div class="steps-one">
                                    <h3 class="steps-name">
                                      1998
                                    </h3>
                                    <span class="steps-span"></span>
                                       <img class="img-responsive check" src="images/check.svg">
                                    <p class="steps-description">
                                      En 1926 Alfredo Fortabat descubre la presencia de piedra caliza en la localidad de Loma Negra, Olavarría.
                                    </p>
                                  </div>

                                  <div class="steps-two">
                                    <h3 class="steps-name">
                                      1999
                                    </h3>                      
                                    <span class="steps-span"></span>
                                    <img class="img-responsive check" src="images/check.svg">
                                    <p class="steps-description">
                                      En 1926 Alfredo Fortabat descubre la presencia de piedra caliza en la localidad de Loma Negra, Olavarría.
                                    </p>
                                  </div>

                                  <div class="steps-three">
                                    <h3 class="steps-name">
                                      2000
                                    </h3>                      
                                    <span class="steps-span"></span>
                                    <img class="img-responsive check" src="images/check.svg">
                                    <p class="steps-description">
                                      En 1926 Alfredo Fortabat descubre la presencia de piedra caliza en la localidad de Loma Negra, Olavarría.
                                    </p>
                                  </div>
                                  <div class="steps-three">
                                    <h3 class="steps-name">
                                      2001
                                    </h3>                      
                                    <span class="steps-span"></span>
                                    <img class="img-responsive check" src="images/check.svg">
                                    <p class="steps-description">
                                      En 1926 Alfredo Fortabat descubre la presencia de piedra caliza en la localidad de Loma Negra, Olavarría.
                                    </p>
                                  </div>
                                </div>
                              </div>                
                          </div>
                        </div>
                      </blockquote>
                    </div> 
                  </div>

                </div>  

              </div>                          
            </div>
          </div>
        </div>
      </div>

Pagina web que estoy armando y donde los media querie no me responden en la parte de la linea de tiempo. al inspeccionarlo con chrome con el toggle device toolbar (control shift M) en las medidas de 320 en adelante se genera un blanco a la derecha que posiblemente me lo estén generando los div col- de bootstraps pero no los saco porque los necesito para generar las estructuras en desktop y que el contenido me quede centrado

  • Me parece que aquí: `$('#timeline-carousel').carousel({` buscará un elemento cuyo `id` sea `timeline-carousel`, pero viendo tu HTML, esos son elementos href. Para alcanzarlos desde jQuery, debes hacerlo así: `$("a[href*=#timeline-carousel]").carousel({` Ver [jQuery selectors](http://api.jquery.com/category/selectors/) – A. Cedano Sep 23 '17 at 13:23
  • Pero que seria? un problema de jquery entonces? – Mariano Andrés Franco Sep 23 '17 at 14:43

0 Answers0