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;
}
}
}