lo que quiero decir es que, mediante media queries (si no las conoces, revisa algo de documentación: https://developer.mozilla.org/es/docs/CSS/Media_queries) debes fijar el ancho de ese contenedor a una cantidad fija de píxeles.
@media (max-width: 600px) {
.contenedor {
width: 100%; /* Fíjate que pongo 100% porque este ancho es tan pequeño, que probablemente será un dispositivo móvil, y ahí el contenedor debería ocupar sencillamente toda la pantalla */
}
}
@media (max-width: 768px) {
.contenedor {
width: 748px;
}
}Vale, lo explico mejor. De 768 no pasaría a nada
PHP:@media (max-width: 600px) { .contenedor { width: 100%; /* Fíjate que pongo 100% porque este ancho es tan pequeño, que probablemente será un dispositivo móvil, y ahí el contenedor debería ocupar sencillamente toda la pantalla */ } } @media (max-width: 768px) { .contenedor { width: 748px; } }
Es decir, que si la ventana tiene 768px de ancho, tu contenedor medirá 748 píxeles. Dije 748 de forma casi arbitraria, son unas medidas que puedes encontrar por Internet y que corresponden con los anchos de pantalla de los dispositivos más habituales.
El motivo de que el contenedor no mida tanto como la ventana es que la pantalla puede ser de 1024x768 píxeles, pero el navegador ya no tendrá todo ese ancho (las ventanas tienen un borde, y si sale la barra de desplazamiento tendrá aún menos ancho). Por eso digo que el contenedor medirá MENOS que el ancho de ventana.
Las dimensiones para las media queries las puedes encontrar por ahí, pero creo que las de Bootstrap son correctas: http://getbootstrap.com/css/#grid-media-queries
Si eso te lía más que ayudarte, olvídalo. Símplemente busca los tamaños de anchos más habituales y pon un ancho de contenedor algo menor.
Lo que consigues con esas media queries es que se apliquen distintos tamaños dependiendo de la resolución. ¿Resultado? Tu contenedor tendrá un ancho correcto en cualquier dispositivo.
@media (min-width: 768px) {
/* Este CSS se aplicará sólo cuando la resolución de la ventana (o view-port, ya verás este concepto) sea de 768 píxeles o más */
}
@media (min-width: 992px) {
/* Este CSS se aplicará con una ventana de 992 píxeles o más */
/* Las reglas que hubiera aquí sobreescribirán al CSS de la media query anterior porque cuando se elige esta media query, también se elige la anterior... */
}<style>
@media (min-width: 768px) {
.contenedor {
width: 728px;
}
}
@media (min-width: 991px) {
.contenedor {
width: 940px;
}
}
@media (min-width: 1200px) {
.contenedor {
width: 1140px;
}
}
.contenedor {
background: #fee;
border: 1px solid red;
margin: 20px auto;
padding: 20px;
}
</style>
<div class="contenedor">
<p>Probando.</p>
</div>