hey, estoy escribiendo un pequeño sitio web y estoy usando w3css que me parece muy simple y agradable.
Tengo el body con max-width:100%; ; una sidebar class="w3-hide-small" con width: 15%; y un main con margin-left:15%; width:85%;
Pero cuando la barra lateral está oculta en la pantalla pequeña, la principal sigue siendo un 85 % y permanece un 15 % blanca a la derecha del navegador.
Creo que lo haré con javascript porque w3css y pensé en este código, pero seguro que está lleno de errores.
var Sidebar = document.getElementById('theSidebar'); if (Sidebar.visibility === hidden){ document.getElementById('theMain').style.width = '100%' document.getElementById('theMain').style.margin-left = '0px'}Pero... simplemente no funciona :D
¿Sugerencias?
Esperando haber descrito bien el problema.
¡¡¡Adiós!!!
Andrea
El problema era que tenía un espacio en blanco cuando cambié el tamaño de la pantalla al ancho del teléfono. Eso es porque configuré el estilo de la división principal <div class=w3-main style="margin-left: 15%; width:85%" > que es 100 - 15 = 85. Estaba pensando en usar una función javascript.
Pero, como sugirió David Thomas, evité javascript para hacer las cosas de una manera más fácil usando la cuadrícula css. Resolví la pregunta escribiendo:
<html> <head> <link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" /> </head> <body class="w3-content" style="max-width:100% !important;"> <div class="w3-sidebar w3-hide-small w3-green" style="width:15%; z-index:3;"> </div> <div class="w3-main w3-rest w3-red" style="margin-left:15%;"> SOMETHING TO WRITE HERE........... </div> </body>E incluso creo que puede que no sea la solución perfecta para mí, la cosa funciona y ahora cuando visualizo en la pantalla del teléfono, ocultando la barra lateral, el margen blanco derecho desaparece y permanece el color rojo.
Agradezco a todos los que me respondieron.
Andrea