Hola amigos,
Tengo un problema, estoy creando un panel para un juego en el cual tengo un bloque a la izquierda y otro a la derecha.
He creado el siguiente código, para los bloques.
Código:
.bloqueizquierdo{
position: absolute;
top: 3%;
left: 1%;
width: 400px;
height: 20%;
background-color: red;
opacity: 0.5;
}
.bloquederecho {
position: absolute;
top: 3%;
right: 1%;
width: 400px;
height: 20%;
background-color: green;
opacity: 0.5;
}
Y funciona pero cuando reduzco el tamaño del navegador los dos bloques se superponen y mi idea es que apilen uno encima de otro o bien se oculten para luego abrirlos con un touch icon.
Es decir que se adapten a la vista móvil.
Alguien me podría decir como puedo hacerlo, pero sin javascript solo CSS y html?
Gracias.