1

estoy teniendo problemas con un icono play sobre una imagen, al hacer el diseño responsive para moviles, en algunos tamaños (de 576px hacia abajo) al encoger la pantalla el icono de desliza y queda al lado derecho de la imagen. Abajo figuran los media queries que estoy usando para los demás tamaños. El tema es eso, que la imagen se desliza mientras encojo la pantalla (no se si es entendible) en vez de que aparezca en otro lado como normalmente lo hace al mover la resolucion. Como la imagen se desliza en vez de saltar, no puedo fijarla con media query, hay otro metodo o estoy haciendo algo mal? agradezco su ayuda de antemano.

 .video2{
        .test{
        position: absolute;
        display: block;
        background: url(http://www.slatecube.com/images/play-btn.png);
        max-width: 50px;
        max-height: 50px;
        height: 100%;
        width: 100%;
        background-size: 50px 50px;
        background-repeat: no-repeat;
        background-position: center; 
        opacity: 0.5;
        left: 220px;
        bottom: 40px;

    @include to-xxxl(){
        left: 265px;
        bottom: 40px;
    }
    @include to-xxl(){
        left: 265px;
        bottom: 40px;
    }
    @include to(1199px){
        left: 220px;
        bottom: 40px;
    }
    @include to-lg(){
        left: 340px;
        bottom: 40px;
    }
    @include to(768px){
        left: 335px;
        bottom: 40px;
    }
    @include to(767px){
        left: 245px;
        bottom: 40px;
    }
    @include to-sm(){
        left: 245px;
        bottom: 40px;
    }
    @include to(575px){
        left: 220px;
        bottom: 40px;
    }
    @include to(414px){
        left: 190px;
        bottom: 40px;
    }
    @include to(375px){
        left: 170px;
        bottom: 40px;
    }
    @include to(374px){
        left: 175px;
        bottom: 40px;
    }
    @include to(320px){
        left: 145px;
        bottom: 40px;
    }
    @include to(319px){
        left: 135px;
        bottom: 40px;
    }
    @include to(246px){
        left: 100px;
        bottom: 40px;
    }
    }
  }

1 respuesta 1

0

En vez de cuadrar tu icono de play con left y bottom puedes intentar hacerlo de esta manera:

.video2{
   position: relative;

  .test{
        position: absolute;
        display: block;
        background: url(http://www.slatecube.com/images/play-btn.png);
        max-width: 50px;
        max-height: 50px;
        height: 100%;
        width: 100%;
        background-size: 50px 50px;
        background-repeat: no-repeat;
        background-position: center; 
        opacity: 0.5;
        left: 50%;
        bottom: 50%;
        transform: translate(-50%, -50%); // esta linea es muy imporntante
  }
}

Con esto no necesitas media queries.

1
  • muchas gracias! cambie los valores para cuadrar mi imagen y efectivamente no necesité media queries! perdí todo un dia ayer midiendo pixel por pixel y con una sola linea hiciste lo que no pude en un dia. Se nota que tengo mucho que aprender. el 21 jun. 2019 a las 14:11

Tu Respuesta

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

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