Problema con web en HTML5 con mobiles

hashimoto · 13 Marzo 2015

Hola estimados, desarrollamos una web en html5 y el menu al verse en aparatos mobiles desaparece, que podria ser, estoy de seguro que es algo muy simple, como en los meta data o algo asi, puedo dar la url de la web en privado por tema de privacidad con el cliente

nibal2 · 16 Marzo 2015

La hiciste de cero o usaste una plantilla?

Si puedes dame la url por privado, lo más probable es que sea una sentencia CSS que te oculta el menú.

nibal2 · 17 Marzo 2015

En tu carpeta CSS, en el archivo responsive.css

es un extracto de la linea 405 a la 450.

....
....
@media only screen and (min-width: 480px) and (max-width: 767px){
#content-wrapper{
width: 440px;
}

#header{
width: 420px;
}

#contact-info-container{
float: left;
width: 100%;
}

#contact-info-container .info{
float: none;
margin: 0 auto 5px;
display: table;
}

#contact-info-container .social-links{
float: none;
display: table;
margin: 0 auto;
width: auto;
}

#logo{
float: none;
margin: 0 auto 30px;
}

#search-box{
display: none;
}

.top-shadow{
background-size: 100%;
float: left;
z-index: 200;
width: 100%;
}
/*
#nav-container #nav{
display: none;
}
*/
...
...

Si te fijas te marque con rojo lo que debes comentar.
Se comenta agreganro " /* " al inicio y " */ " al final de lo que quieres comentar

Todo lo que está dentro de

@media only screen and (min-width: 480px) and (max-width: 767px){

Ocurre junto con la desaparición de tu menú, asi que si quieres quitar otro cambio debes eliminarlo o comentarlo dentro de esta sentencia.

Saludos!!!

hashimoto · 17 Marzo 2015

vale gracias

hashimoto · 22 Marzo 2015

gracias, solo para cachar, como supiste que ese era el error?

nibal2 · 23 Marzo 2015

Rickynet dijo:
gracias, solo para cachar, como supiste que ese era el error?

#nav-container #nav

esto identifica al menú que desaparecía
"#" se utiliza para indicar que lo que viene despues es la id de un elemento en CSS

display: none;

esta sentencia le indica al navegador que no debe mostrar ese elemento.

@media only screen and (min-width: 480px) and (max-width: 767px){

indica que lo que está dentro debe pasar sólo cuando la pantalla sea de ancho menor a 767px y mayor a 480px

Además de usar firefox + firebug para ayudarme a identificar las sentencias aplicadas a los elementos al vuelo.

hashimoto · 23 Marzo 2015

vale gracias el media only screen no lo conocia

hashimoto · 20 Abril 2015

resucito este tema, no me funciono, sigo sin verlo en el celular

olvidenlo solo comente una linea pero habian muchas mas, plop lol

eugeniahardware · 22 Mayo 2015

Monibal2 dijo:
En tu carpeta CSS, en el archivo responsive.css

es un extracto de la linea 405 a la 450.

Si te fijas te marque con rojo lo que debes comentar.
Se comenta agreganro " /* " al inicio y " */ " al final de lo que quieres comentar

Todo lo que está dentro de

Ocurre junto con la desaparición de tu menú, asi que si quieres quitar otro cambio debes eliminarlo o comentarlo dentro de esta sentencia.

Saludos!!!

Genial, muchas gracias muy útil la información!

ololear:

Problema con web en HTML5 con mobiles

hashimoto

Gold Member

nibal2

pajarón nuevo

nibal2

pajarón nuevo

hashimoto

Gold Member

hashimoto

Gold Member

nibal2

pajarón nuevo

hashimoto

Gold Member

hashimoto

Gold Member

eugeniahardware

Miembro Activo