0

Ultimamente estoy trabajando bastante con librerias como parallax.js y wow.js entonces he usado varios (demasiados quizás) elementos flotantes para posteriormente aplicar algun efecto de movimiento.

Entiendo que los breakpoints que maneja Bootstrap son:

<style>
    /* Small devices (landscape phones, 576px and up) */
    @media (min-width: 576px) {}

    /* Medium devices (tablets, 768px and up) */
    @media (min-width: 768px) {}

    /* Large devices (desktops, 992px and up) */
    @media (min-width: 992px) {}

    /* Extra large devices (large desktops, 1200px and up) */
    @media (min-width: 1200px) {}
    
    @media (max-width: 575.98px) {}
    /* Small devices (landscape phones, less than 768px) */
    
    @media (max-width: 767.98px) {}
    /* Medium devices (tablets, less than 992px) */
    
    @media (max-width: 991.98px) {}
    /* Large devices (desktops, less than 1200px) */
    
    @media (max-width: 1199.98px) {}
</style>

Mi problema es que cuando tengo una estructura parecida a lo siguiente, ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document SOes</title>
</head>
<body>

    <div class="container">
        <a href="">
            <img src="{{url('assets/element/element.png')}}" alt="" class="moveStackOverF">
        </a>
    </div>
    
</body>
</html>

Y tengo en mi hoja de estilo por ejemplo:

<style>
    .moveStackOverF{
        position: relative;
        top: 10%;
        left: 5%;
        width: 50%
    }
</style>

Tengo que estar considerando en cada uno de los Breakpoints el Height de la pantalla porque al tener un top en porcentaje mi elemento se sale del body cuando este se hace mas pequeño.

Como puedo solucionar ese problema?

Por que' los Breakpoints consideran el width pero no toman el height ?

Siempre he tenido ese problema cuando quiero hacer un sitio responsivo. Agradezco cualquier comentario,

1
  • No uses tanto breakpoints, usa solo los primeros 4. el 30 ago. 2021 a las 17:16

1 respuesta 1

1

puedes usar la propiedad hidden si lo que quieres es que no se salga del body eso si lo que quieres es que se muestre solo un determinado valor de height

    
    body{
      height:100vh;
      overflow: hidden;
    }
    .container{
        background: teal;
        height:120%;
    }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document SOes</title>


</head>
<body>

    <div class="container">
        <a href="">
            <img src="{{url('assets/element/element.png')}}" alt="" class="moveStackOverF">
        </a>
    </div>
    
</body>
</html>

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.