0

[![introducir la descripción de la imagen aquí][1]][1]

[1]:

<!-- Banner -->
<section class="banner">
    <div class="container-fluid banner__container" >
        <div class="row banner__row">
            <div class="col-12 col-lg-6 banner__paragraphs">
                <div class="paragraphs__container">
                    <h1 class="m-4 hero-heading paragraphs__title m-0">Lorem Ipsum Dolor Sit Amet </h1>
                    <h2 class="m-4 paragraphs__subtitle">Lorem Ipsum Dolor Sit Amet</h2>
                </div>
                <button class="ml-4 paragraphs__button shadow btn btn-secondary">Primary</button>
            </div>
            <div class="col-12 col-lg-6 banner__media">
                <div class="banner__images">
                    <div class="images__phone"></div>
                    <div class="images__capture"></div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- /////////////////////////////////////////////////////// -->

/css/

/*banner */


/* Height control */
.banner {
    margin-top: 100px;
    padding: 0;
    /*overflow: hidden;*/
    background-color: rgb(2, 117, 216);
}

.banner__container,
.banner__row {
    min-height: 100%;
}

/* --- paragraphs --- */

.paragraphs__subtitle {
    font-size: 'Open Sans';
    color: #ffffff;
    font-size: 30px;
}

.banner__paragraphs {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    color: white;
}

.paragraphs__title,
.paragraphs__subtitle {
    text-align: center;
}

/* --- media ---*/

.banner__media {
    min-height: 530px;
    padding: 0; /* rid bootstrap padding*/
    width: 100%;

}

.banner__images {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.images__phone {
    position: absolute;
    z-index: 200;
    height: 130%;
    width: 100%;

    background-image: url('../images/iphone.png');
    background-size: cover;
    animation-name: slideInUp;
    animation-delay: 0.4s;
    animation-duration: 0.75s;
}

.images__capture {
    position: absolute;
    z-index: 100;
    height: 135%;
    width: 100%;
    background-image: url('../images/admin.png');
    background-size: cover;
    animation-name: slideInUp;
    animation-delay: 0.2s;
    animation-duration: 0.75s;
}

.images__phone,
.images__capture {
    top: 25px;
}

@media (min-width: 700px) {

    .images__phone,
    .images__capture {
        left: 20vw;
    }


}

@media (min-width: 800px) {

    .images__phone,
    .images__capture {
        left: 30vw;
    }


}


@media (min-width: 992px) {

    .banner {
        margin-top: 60px;
        max-height: calc(100vh - 60px)
    }

    .banner__paragraphs,
    .banner__media {
        max-height: calc(100vh - 60px);
    }

    .paragraphs__title,
    .paragraphs__subtitle {
        text-align: left;
    }

    .images__capture {
        height: 130%;
    }

    .images__phone,
    .images__capture {
        top: 25px;
        left: 0;
    }

    .banner__paragraphs {
        align-items: flex-start;
    }

}

@media (min-width: 1200px) {

    .images__capture {
        height: 135%;
    }

    .images__capture,
    .images__phone {
        left: 10%;
    }

}

@media (min-width: 1300px) {
    .images__capture,
    .images__phone {
        left: 20%;
    }
}
@media (min-width: 1600px) {
    .images__capture,
    .images__phone {
        left: 40%;
    }
    .paragraphs__title,
    .paragraphs__subtitle {
        margin: 0;
        padding: 0;
    }
}
/*banner*/

hay un problema que en otras resoluciones los elementos de la imagen del capture y del celular se mueven y siempre deberian mantener esa proporcion y posicion en cualquier resolucion, y en movil las imageenes se deberian desplazar hacia abajo pero en la misma posicion. y justo hasta el boton azul.

pd: el banner siempre debe ocupar la totalidad del height en diferentes monitores, y obvio que se ajuste el texto y las imágenes a esa resolución, pero en vez de eso, se achica el texto, las imágenes se achican o se mueven un poco hacia arriba.

no se que mas hacer :(, quizás como un amigo dice, con javascript se solucionaría, pero no soy muy diestro en js.

eso sin contar que tampoco puedo integrar midnight.js en esta pagina web para que cambie el color del nav y el color de texto e icono.

please , help!.

2 respuestas 2

1

puedes usar javascript para tal situacion o jquery, en mi opinion resulta mas practico y facil aqui te dejo un ejemplo :

esta es la sintaxys para javascript

window.onresize = function() {
    if (window.innerHeight >= 820) { /*altura mayor o igual a x cantida tu codigo a ejecutar */ }
    if (window.innerWidth <= 1280) { /*anchura mayor o igual a x cantida tu codigo a ejecutar */ }
}

sintaxys jquery

$(window).on('resize', function(){
      var win = $(this); //this = window
      if (win.height() >= 820) { /*altura mayor o igual a x cantida tu codigo a ejecutar */ }
      if (win.width() >= 1280) { /*anchura mayor o igual a x cantida tu codigo a ejecutar */ }
});
2
  • Gracias andy. dentro de los corchetes colocaria un el css que se deberia ejecutar, tipo media query?. no soy muy diestro en JQuery ni js, pero seria algo asi? , 'height':'900px', o asi?, $('#banner').css({ 'height':'900px' }); y asi $('.images_phone,images_capture').css({ 'top':'30px' }); algo asi?.
    – Alexcertz
    Commented el 27 jul. 2018 a las 22:03
  • exactamente amigo ! si te sirvio la respuesta no olvides calificarla como valida gracias!
    – andy gibbs
    Commented el 30 jul. 2018 a las 13:11
0
<script>


    Alto=$(window).height();
    Ancho=$(window).width();
    AltoX=Alto-64;
    AltoY=Alto-(Alto/3);
    $(".text_content").css({"height":AltoX+"px"});
    $(".dispositivos").css({"height":AltoY+"px"});

//banner
if (Alto>780 && Alto<820 ) {    
    if (Ancho>1200 && Ancho <1300) {
        $(".text_content").css({"width":"40%"});
        $(".dispositivos").css({"width":"57%"});        
    }

    if (Ancho>340 && Ancho < 390) {
        $(".banner").css({"min-height":"1200px"});
        $(".banner .text_content").css({"height":Alto+"px"});
        $(".banner .text_content").css({"min-height":Alto+"px"});

        $(".banner .dispositivos").css({"height":(1200-Alto)+"px"});
        $(".banner .dispositivos").css({"min-height":(1200-Alto)+"px"});

    }
}


</script>
0

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.