Estoy tratando de ajustar el ancho de un div cuando el navegador disminuye de tamaño con el ancho máximo. El div hace todo menos cambiar el ancho. Lo he visto a través de las herramientas de desarrollador en el navegador Chrome y el ancho se ha reducido. ¿Qué pasa?
HTML
Aifjoisdjfiosjdfoisdjfoidsjfoisjd CSS PRINCIPAL:
*{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } html, body { height:100%; } body { padding:60px 0 0 0; /* 60 — header height*/ margin:0; } .main { min-width:100%; height:60px; margin-top: -60px; /* 60 — header height*/ margin-left: -300px; border-bottom: solid 1pt #ADADAD; } .containerRight { float:left; width:100%; height: 100%; overflow-y: scroll; } .left { float:left; height: 100%; width: 300px; border-right: solid 1px #C9C9C9; -webkit-box-shadow: 1px 0 2px #888888; -moz-box-shadow: 1px 0 2px #888888; box-shadow: 1px 0 2px #888888; }
CSS RESPONSABLE
.left { width: 800px; background-color: red; } .containerRight { display: none; }
En lugar de poner la media=screen en la cabeza, para su archivo responsive.css, use esto:
@media (max-width:500px){ .left { width: 800px; background-color: red; } .containerRight { display: none; }
}
Aprenda los conceptos básicos sobre las consultas en los medios aquí: http://webdesignerwall.com/tutorials/responsive-design-in-3-steps y https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/ Media_queries . Esto debería ayudarte a comenzar.