Hola,
Estoy haciendo una web en HTML5 y responsive design.
Tengo esta estructura:
Código HTML:
<div id="quehacemos">
<div class="columnas">
<div class="columna" style="background: #F5080C;"></div>
<div class="columna" style="background: #006CFF;"></div>
<div class="columna" style="background: #48BC00;"></div>
</div>
</div> Mi idea es que mientras la ventana sea mayor a 660px las columnas estén una al lado de la otra, pero cuando sea menor de ese ancho quiero que cada columna mida el tamaño de la ventana total pero igual una esté al lado de la otra (ya diciendo #quehacemos{ overflow: hidden; } haré que solo se vea una columna).
El tema es que no sé cómo decir que cada columna tenga un 100% de la ventana, ya que el 100% se basa en su padre y no en su abuelo.
Ejemplo
Código HTML:
@media screen and (max-width: 660px){
div.columnas{
width: 300%;
}
div.columna{
width: 100% !important;
}
}
El 100% de "DIV.COLUMNA" sería de su padre "DIV.COLUMNAS" y no de su antecesor "DIV#QUEHACEMOS
En resumen, quiero que DIV.COLUMNA tengo el 100% de su "abuelo" y no de su "padre"