/* Añadir al final de estils.css, o enlazar como archivo aparte DESPUÉS de estils.css y style.css en el de cada página. */ @media screen and (max-width: 900px) { .page_margins { width: 100% !important; max-width: 100%; } } @media screen and (max-width: 700px) { /* Las dos columnas (menú lateral + contenido) pasan a apilarse */ #col1 { float: none; width: 100%; box-sizing: border-box; } #col3 { margin-left: 0; } /* El menú horizontal por hover no funciona bien con el dedo: lo apilamos en vertical para que sea totalmente táctil */ ul#css3menu1.topmenu, ul#css3menu1 li { float: none; display: block; width: 100% !important; } ul#css3menu1 ul { position: static; } /* Reproductor de audio e imágenes: que no desborden la pantalla */ #amazingaudioplayer-1 { width: 100% !important; max-width: 580px; } img { max-width: 100%; height: auto; } /* Las tablas de maquetación (título, letra del himne, botonera) ocupan todo el ancho disponible en vez de un valor fijo */ table[width] { width: 100% !important; } }