// 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>estoy teniendo problemas con los CSS de este sitio que estoy armando y donde los media querie no me responden en la parte de la linea de tiempo. En las medidas que llevo armada que son las de 320 y 375, el problema es que me esta generando un blanco a los costados 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
