Muy buenas, soy nuevo en el foro y en el universo de lo css y html. Estudio la carrera de diseño gráfico y como proyecto me dejaron re-hacer el sitio web de mi instituto con adaptación móvil. Pero lamentablemente tengo un problema
Al usar el código:
Código HTML:
<meta name="viewport" content="width=device-width, initial-scale=1" />
para adaptar mi sitio web, coloco los sgtes codigos en CSS:
Código HTML:
}
@media screen and (max-width:800px) {
#sidebar{ font-size:10px;
display:auto;
text-align: left;
float: none;
width: auto;
overflow: none;
margin-top: 30px;}
img{max-width:100%;}
#cua {display:none;}
#all {display:none;
font-size:8px;
text-align: left; float: none;width: auto}
.white {padding: 0; height:300px;}
#nav li { float: none; width: 100%;
padding: 10px 270px 20px 10px;
margin-top: -10px;}
#nav a {padding: 0px;}
.wea {display: block;}
.gene {margin: none;
width: 100px;}
}
El problema es que cuando quiero visualizarlo en el tamaño de un móvil no aparecen mis recuadros e imagen, aqui les dejo unas fotos para que me entiendan mejor.
Este es es el inicio de mi html:
Y asi es como termina:
Mi CSS en general tiene más de 237 lineas pero colocaré las partes en las que estan los class con el que usé en el "media screen":
Y como se ve en movil es así(no se visualiza nada en su interior):
Y de forma normal:
Porfavor!! necesito ayuda, llevo atascado en esto por horas y la verdad no sé que más hacer