Tengo una plantilla RWD, pero a la hora de querer meter un div (que es básicamente el sidebar de un blog que se va automáticamente abajo cuando se estrecha la pantalla) este no se alinea correctamente y las distancias entre el div y los bordes cambian al estar cambiando el tamaño del navegador.
Aquí les muestro la imagen de lo que sí está bien (con palomita) y el div que tiene problemas (con tache)
Este es el código del sidebar standard:
Código CSS:
Ver original.sidecontainer{
width:20%;
height:200px;
-webkit-box-shadow: 0px 0px 19px rgba(50, 50, 50, 0.19);
-moz-box-shadow: 0px 0px 19px rgba(50, 50, 50, 0.19);
box-shadow: 0px 0px 19px rgba(50, 50, 50, 0.19);
-webkit-border-top-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
background:#FFF;
padding:25px;
margin-left:10px;
margin-bottom:12px;
float:left;
}
Y esto es el código que adapta lo que es el sidebar a la parte de abajo cuando la pantalla tiene menos de 760px de ancho:
Código CSS:
Ver original@media screen and (max-width: 760px) {
.sidecontainer{
width:100%;
margin:2% 28px 0% 28px;
padding:0px;
}
}
Gracias