1

Tengo un problema con un carousel que cuando pasa a la siguiente slider se mueve hacia abajo un poco como si tuviera una linea más pero del segundo al tercer slider no se mueve. Ya intenté poner una linea en blanco a ver e igual se mueve y no se por que.

@import url('https://fonts.googleapis.com/css?family=Barrio|Monoton|Oregano|Sumana');
@import url('https://fonts.googleapis.com/css?family=Sedgwick+Ave+Display');
    
html body {
    height: 100%;
    font-family: 'Open Sans', sans-serif;
    background-image: url("../images/fondo.jpg");
    background-repeat: no-repeat;
    background-position: left;
}

#navbar {
    padding-top: 1%;
    padding-bottom: 1%;
    position: fixed;
    z-index: 10000;
    top: 0px;
    width: 100%;
    background-color: rgb(204, 12, 12);
    color:white;
}
    #nav-a {
        color: rgb(255, 255, 255);
        font-size: larger;
        border-radius: 1rem;
        font-family: 'Barrio', cursive;
    }
    .fa-building-o:before {
        color: rgba(255, 255, 255, 0.452);
    }

    #slogan {
        font-family: 'Sedgwick Ave Display', cursive;
        font-size: 1.5rem;
    }
        @media only screen and (max-width: 401px) {
            #slogan {
            display:none;    
        } }

#slider {
/* margin-top: 4rem; */
    width: 50%;

}    
    .carousel-inner {
        position: relative;
        width: 100%;
        overflow: hidden;
        /* height: 24rem; */
    }
        #arrow-prev {
            -moz-transform: scaleX(-1); /* Firefox */
            -o-transform: scaleX(-1); /* Opera */
            -webkit-transform: scaleX(-1); /* Chrome y Safari */
            transform: scaleX(-1); /* w3org */
            filter: FlipH; /* Internet Explorer */
        }
        #nav-slider-arrow {
            background: none;

        }


a:hover {
    color:black;
    background-color:lightgray;
}   

#registro {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
    #registro-logo-card {
        text-align: center;
        margin-top: 2rem;
    }

    #registro-card {
        width: 20rem;
        margin-top: 2rem;
    }

    .wrapper {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin: 0 auto -4em;
      }
footer {
    /* display: block; */
    position: fixed;
    width: 100%;
    bottom: 0;
    text-align: center;
    background-color: rgb(204, 12, 12);
    padding: 25px 0;
}
    .list-inline li {
        display:inline;
        padding-left:3px;
        padding-right:3px;
    }
        #foot-a  {
            text-decoration: none;
            color:white;
            padding: 1rem;
            border-radius: 1rem;
            font-family: 'Oregano', cursive;
        }
    .separador {
        color:gray;
    }

    #footer-copyright {
        color: rgb(83, 81, 81);
    }


  .scroll-to-top{
    text-decoration: none;
    position: fixed; 
    bottom: 20px;
    right: 20px;
    display: none;
    font-size: 36px;
    color: #555;
  }

  .scroll-to-top:hover{
    text-decoration:none;
    color: rgb(214, 18, 18);
    background: none;
  }




 .home-row {
     font-size: larger;
     }
#home-slider {
    background: rgba(255, 255, 255, 0.342);
    width: 40%;
    border-radius: 2px;
    padding: 2rem; }
    @media only screen and (min-width: 300px) {
        #home-slider {
        width: 95%;
        margin-bottom: 5rem; } }
    @media only screen and (min-width: 768px) {
        #home-slider {
        width: 50%; } }

    .carousel-indicators {
        bottom: -2rem;
        }
    .slide-item{
        padding: 1rem;
    }
    #text-slide{
        font-family: 'Sumana', serif;
    }
    #autoedif {
        font-family: 'Monoton', cursive;
    }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

<div class="wrapper">
    <!-- Menú -->
        <nav class="navbar navbar-expand-lg navbar-light navbar-fixed-top affix-top" id="navbar">
            <div class="row">
                <di class="col-2">
                        <a class="navbar-brand" href="./index.html"><i class="fa fa-building-o" aria-hidden="true"></i></a>
                </di>
                <div class="col-10">
                    <p id="slogan">un problema, una solución </br> ¡AutoEdifica!</p>
                </div>
            </div>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <div class="container">
                    <div class="row justify-content-end navbar-nav">
                        <a class="nav-item nav-link active" href="#" id="nav-a">Contacto <span class="sr-only">(current)</span></a>
                        <a class="nav-item nav-link" href="#registro"id="nav-a">REGISTRO</a>
                    </div>
                </div>
            </div>
        </nav>

        <a href="#" class="scroll-to-top"><i class="fa fa-arrow-circle-up" aria-hidden="true"></i></a>
        </br></br></br></br></br></br>
    <!-- Slider -->
    <div class="container" id="home-slider">
    <div class="row home-row">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="11500">
            <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                  </ol>
            <div class="carousel-inner" role="listbox">
            <div class="carousel-item active">
                <p align="justify" id="text-slide"><span style="font-weight:bold">¡AutoEdifica!</span> Es la empresa que llegó a revolucionar
                                                                    la forma de trabajar, donde tu serás el mandante
                                                                    y tendrás todos los medios para continuar y
                                                                    mejorar una necesidad por medio de un par de clics
                                                                    podrás desarrolar tu proyecto en 3 líneas de
                                                                    trabajo, mano de obra, proveedor y despacho </br></br>
                                                                    Todo por un medio <span id="autoedif">"AUTOEDIFICA"</span></p>
                                                                    <p align="center">Soñar, Crear y Concretar.</p>
            </div>
            <div class="carousel-item">
                    <p align="justify" id="text-slide"><span style="font-weight:bold">AutoEdificador:</span> para registrarse y poder acceder a la 
                                                                    gamma de servicios y beneficios solo debes seguir unos 
                                                                    simples pasos que te guiará el sitio en donde podrás 
                                                                    registrarte llenando un formulario y listo.</br> </br>
                                                                    &nbsp;&nbsp; Podrás entrar a tu perfil en donde diseñarás y distribuirás 
                                                                    de forma fácil y sencilla optimizando tiempo y recurso 
                                                                    todo en un solo lugar <span id="autoedif">¡AUTOEDIFICA!</span></p></br>
            </div>

            <div class="carousel-item">
                    <p align="justify" id="text-slide"><span style="font-weight:bold">SocioEdificador:</span> para registrarse y poder acceder 
                                                                    como prestador de servicios o proveedor solo debes de 
                                                                    seguir unos simples pasos que te guiará el sitio
                                                                    en donde podrás registrarte llenando un formulario 
                                                                    y listo.</br> </br>
                                                                    &nbsp;&nbsp; Podrás acceder a tu perfil en donde diseñarás y 
                                                                    distribuirás de forma fácil y sencilla optimizando 
                                                                    tiempo y recurso todo en un solo lugar <span id="autoedif">¡AUTOEDIFICA!</span></p></br>
            </div>
            </div>
        </div>
        </div> <!-- row -->
    </div> <!-- contenedor -->
    </br>
<div class="push"></div>
</div> <!-- Wrapper -->
<footer>
        <div class="fluid">
            <a id="foot-a" href="#">Términos y Condiciones</a>

            <span class="separador">| </span> <a id="foot-a" href="#">Política y Privacidad</a>

            <span class="separador">| </span> <a id="foot-a" href="#">RRSS</a>

            <span class="separador">| </span> <a id="foot-a" href="#">Preguntas Frecuentes</a>

        </div>
</footer>

1 respuesta 1

4

Le agregué una clase al contenedor padre del slider slide-cont y le agregué en el CSS un min-height: 250px para que no pueda redimensionarse.

@import url('https://fonts.googleapis.com/css?family=Barrio|Monoton|Oregano|Sumana');
@import url('https://fonts.googleapis.com/css?family=Sedgwick+Ave+Display');
    
html body {
    height: 100%;
    font-family: 'Open Sans', sans-serif;
    background-image: url("../images/fondo.jpg");
    background-repeat: no-repeat;
    background-position: left;
}

#navbar {
    padding-top: 1%;
    padding-bottom: 1%;
    position: fixed;
    z-index: 10000;
    top: 0px;
    width: 100%;
    background-color: rgb(204, 12, 12);
    color:white;
}
    #nav-a {
        color: rgb(255, 255, 255);
        font-size: larger;
        border-radius: 1rem;
        font-family: 'Barrio', cursive;
    }
    .fa-building-o:before {
        color: rgba(255, 255, 255, 0.452);
    }

    #slogan {
        font-family: 'Sedgwick Ave Display', cursive;
        font-size: 1.5rem;
    }
        @media only screen and (max-width: 401px) {
            #slogan {
            display:none;    
        } }

#slider {
/* margin-top: 4rem; */
    width: 50%;

}    
    .carousel-inner {
        position: relative;
        width: 100%;
        overflow: hidden;
        /* height: 24rem; */
    }
        #arrow-prev {
            -moz-transform: scaleX(-1); /* Firefox */
            -o-transform: scaleX(-1); /* Opera */
            -webkit-transform: scaleX(-1); /* Chrome y Safari */
            transform: scaleX(-1); /* w3org */
            filter: FlipH; /* Internet Explorer */
        }
        #nav-slider-arrow {
            background: none;

        }


a:hover {
    color:black;
    background-color:lightgray;
}   

#registro {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
    #registro-logo-card {
        text-align: center;
        margin-top: 2rem;
    }

    #registro-card {
        width: 20rem;
        margin-top: 2rem;
    }

    .wrapper {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin: 0 auto -4em;
      }
footer {
    /* display: block; */
    position: fixed;
    width: 100%;
    bottom: 0;
    text-align: center;
    background-color: rgb(204, 12, 12);
    padding: 25px 0;
}
    .list-inline li {
        display:inline;
        padding-left:3px;
        padding-right:3px;
    }
        #foot-a  {
            text-decoration: none;
            color:white;
            padding: 1rem;
            border-radius: 1rem;
            font-family: 'Oregano', cursive;
        }
    .separador {
        color:gray;
    }

    #footer-copyright {
        color: rgb(83, 81, 81);
    }


  .scroll-to-top{
    text-decoration: none;
    position: fixed; 
    bottom: 20px;
    right: 20px;
    display: none;
    font-size: 36px;
    color: #555;
  }

  .scroll-to-top:hover{
    text-decoration:none;
    color: rgb(214, 18, 18);
    background: none;
  }




 .home-row {
     font-size: larger;
     }
#home-slider {
    background: rgba(255, 255, 255, 0.342);
    width: 40%;
    border-radius: 2px;
    padding: 2rem; }
    @media only screen and (min-width: 300px) {
        #home-slider {
        width: 95%;
        margin-bottom: 5rem; } }
    @media only screen and (min-width: 768px) {
        #home-slider {
        width: 50%; } }

    .carousel-indicators {
        bottom: -2rem;
        }
    .slide-item{
        padding: 1rem;
    }
    #text-slide{
        font-family: 'Sumana', serif;
    }
    #autoedif {
        font-family: 'Monoton', cursive;
    }
    
  .slide-cont{
    
    min-height: 250px;
  
  }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

<div class="wrapper">
    <!-- Menú -->
        <nav class="navbar navbar-expand-lg navbar-light navbar-fixed-top affix-top" id="navbar">
            <div class="row">
                <di class="col-2">
                        <a class="navbar-brand" href="./index.html"><i class="fa fa-building-o" aria-hidden="true"></i></a>
                </di>
                <div class="col-10">
                    <p id="slogan">un problema, una solución </br> ¡AutoEdifica!</p>
                </div>
            </div>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <div class="container">
                    <div class="row justify-content-end navbar-nav">
                        <a class="nav-item nav-link active" href="#" id="nav-a">Contacto <span class="sr-only">(current)</span></a>
                        <a class="nav-item nav-link" href="#registro"id="nav-a">REGISTRO</a>
                    </div>
                </div>
            </div>
        </nav>

        <a href="#" class="scroll-to-top"><i class="fa fa-arrow-circle-up" aria-hidden="true"></i></a>
        </br></br></br></br></br></br>
    <!-- Slider -->
    <div class="container" id="home-slider">
    <div class="row home-row slide-cont">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="11500">
            <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                  </ol>
            <div class="carousel-inner" role="listbox">
            <div class="carousel-item active">
                <p align="justify" id="text-slide"><span style="font-weight:bold">¡AutoEdifica!</span> Es la empresa que llegó a revolucionar
                                                                    la forma de trabajar, donde tu serás el mandante
                                                                    y tendrás todos los medios para continuar y
                                                                    mejorar una necesidad por medio de un par de clics
                                                                    podrás desarrolar tu proyecto en 3 líneas de
                                                                    trabajo, mano de obra, proveedor y despacho </br></br>
                                                                    Todo por un medio <span id="autoedif">"AUTOEDIFICA"</span></p>
                                                                    <p align="center">Soñar, Crear y Concretar.</p>
            </div>
            <div class="carousel-item">
                    <p align="justify" id="text-slide"><span style="font-weight:bold">AutoEdificador:</span> para registrarse y poder acceder a la 
                                                                    gamma de servicios y beneficios solo debes seguir unos 
                                                                    simples pasos que te guiará el sitio en donde podrás 
                                                                    registrarte llenando un formulario y listo.</br> </br>
                                                                    &nbsp;&nbsp; Podrás entrar a tu perfil en donde diseñarás y distribuirás 
                                                                    de forma fácil y sencilla optimizando tiempo y recurso 
                                                                    todo en un solo lugar <span id="autoedif">¡AUTOEDIFICA!</span></p></br>
            </div>

            <div class="carousel-item">
                    <p align="justify" id="text-slide"><span style="font-weight:bold">SocioEdificador:</span> para registrarse y poder acceder 
                                                                    como prestador de servicios o proveedor solo debes de 
                                                                    seguir unos simples pasos que te guiará el sitio
                                                                    en donde podrás registrarte llenando un formulario 
                                                                    y listo.</br> </br>
                                                                    &nbsp;&nbsp; Podrás acceder a tu perfil en donde diseñarás y 
                                                                    distribuirás de forma fácil y sencilla optimizando 
                                                                    tiempo y recurso todo en un solo lugar <span id="autoedif">¡AUTOEDIFICA!</span></p></br>
            </div>
            </div>
        </div>
        </div> <!-- row -->
    </div> <!-- contenedor -->
    </br>
<div class="push"></div>
</div> <!-- Wrapper -->
<footer>
        <div class="fluid">
            <a id="foot-a" href="#">Términos y Condiciones</a>

            <span class="separador">| </span> <a id="foot-a" href="#">Política y Privacidad</a>

            <span class="separador">| </span> <a id="foot-a" href="#">RRSS</a>

            <span class="separador">| </span> <a id="foot-a" href="#">Preguntas Frecuentes</a>

        </div>
</footer>

2
  • muchas gracias! ah ya entendi basicamente era porque se estaba adaptando al texto y le debi poner un minimo de tamaño cierto? mmmmm ya se jjejejeje muchas gracias!
    – Naoto
    Commented el 23 nov. 2017 a las 15:36
  • @Naoto exacto, como se te redimencionaba a menor tamaño simplemente le dices que no se permita bajar de ese tamaño y listo. Commented el 23 nov. 2017 a las 15:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.