Cómo ocultar el sidebar en pantallas pequeñas con CSS

dreknoun · 18 Jun 2014

¡Hola Betas!
Mientras diseño mi propia plantilla estoy tratando de adaptar la actual a mi gusto. Lo que sucede es que el contenido se comprime demasiado en una pantalla "pequeña" por lo que quiero ocultar el sidebar cuando la pantalla mida menos de "X" pixeles y el contenido pase a ocupar toda la pantalla.
Si no estoy mal esto se hace a través de CSS, pero no tengo la más remota idea de cómo hacerlo. Agradecería si alguien me pudiese echar una mano.

johanso · 18 Jun 2014

Utiliza los Media Queries de Css3
Solo especifica las resoluciones en que quieres que se apliquen los css que están dentro de la declaración, y le das al sidebar display: none;

Acá hay una lista con las diferentes resoluciones y dispositivos:
CSS3 Media Queries Snippets

letasgon · 18 Jun 2014

Como ya dijeron lo puedes lograr con media queries.

Mejia · 18 Jun 2014

con Media Queries lo puedes hacer.

Te dejo un ejemplo:

@media screen and (max-width: 524px) {
.sidebar { display: none }
}

eso solo es un ejemplo, puedes informarte mas e ir probando.

saludos.

dreknoun · 18 Jun 2014

Gracias [MENTION=79945]johanso[/MENTION] estoy probando con las Media Queries

Mejia dijo:
con Media Queries lo puedes hacer.

Te dejo un ejemplo:

eso solo es un ejemplo, puedes informarte mas e ir probando.

saludos.

Eso me aclara un poco más las cosas de como utilizarlo jajaja. Gracias Mejia, voy a probar.

---------- Post agregado el 18-jun-2014 hora: 23:48 ----------

Vale, [MENTION=1706]Mejia[/MENTION] [MENTION=79945]johanso[/MENTION] [MENTION=18960]letasgon[/MENTION] estoy aplicando mal la Media Queries porque me está saliendo al revés. El sidebar desaparece con la pantalla completa y aparece cuando tiene poco espacio. (Ojo, lo estoy haciendo en wordpress, quizás sea eso lo que me caga).

Tengo la clase sidebar.c-4-12 y lo estoy añadiendo así:

@media only screen
and (min-width : 980px) {
.sidebar.c-4-12 { display: none; }
}

¿Estoy colocando algo mal?

Mejia · 18 Jun 2014

dreknoun dijo:
Gracias [MENTION=79945]johanso[/MENTION] estoy probando con las Media Queries

Eso me aclara un poco más las cosas de como utilizarlo jajaja. Gracias Mejia, voy a probar.

---------- Post agregado el 18-jun-2014 hora: 23:48 ----------

Vale, [MENTION=1706]Mejia[/MENTION] [MENTION=79945]johanso[/MENTION] [MENTION=18960]letasgon[/MENTION] estoy aplicando mal la Media Queries porque me está saliendo al revés. El sidebar desaparece con la pantalla completa y aparece cuando tiene poco espacio. (Ojo, lo estoy haciendo en wordpress, quizás sea eso lo que me caga).

Tengo la clase sidebar.c-4-12 y lo estoy añadiendo así:

¿Estoy colocando algo mal?

prueba como te lo dije.

@media screen and (max-width: 524px) {

}

PD, si lo resolución es menor a 524 el sidebar va desaparecer.

yo no se mucho de css (lo minimo) pero yo así lo uso y me va bien.

johanso · 18 Jun 2014

Puede ser problema de seleccion, por que el codigo esta bien, ahi le estas diciendo.
Cuando este en dispositivos de pantalla y tenga una resolucion minima a 980px esconde el div con clase sidebar y lo otro que estas seleccionando.
Puedes dar la URL del sitio? o lo tienes offline...

dreknoun · 18 Jun 2014

Ya está, [MENTION=1706]Mejia[/MENTION] ahora me di cuenta de cómo me pasaste el código, utilicé el que me pasaron antes que era min-width en lugar de max-width jaja. Así es como lo coloqué (para agrandar también el contenido

) :

@media only screen and (max-width : 980px) {
.sidebar.c-4-12 {display:none;}
#content, #article, .post, #single_post {
width: 142%;}
}

[MENTION=79945]johanso[/MENTION] el código que me pasaste era al revés de lo que quería hacer. Me eliminaba el sidebar cuando la pantalla es más grande de x tamaño, yo quería que desapareciese cuando era más pequeño.

Gracias a los dos [MENTION=79945]johanso[/MENTION] y [MENTION=1706]Mejia[/MENTION] por la ayuda

---------- Post agregado el 19-jun-2014 hora: 00:10 ----------

PD: Ahora estoy intentando centrar y tampoco lo consigo.Me cachis...jajaja. Una última manita

margin:0px auto 0px auto;

Eso sería suficiente para centrar todo el contenido?

johanso · 18 Jun 2014

ajjaja no problem,,,
bueno margin: 0 auto; centra el bloque pero debe de tener un ancho, un width, ya sean valores absolutos o relativos. claro que depende la situación.

Fabián Rodríguez · 18 Jun 2014

Lo que comúnmente se hace en estos casos es darle al contenido un width:100% y display:block para que este ocupe todo el espacio, inmediatamente se le dan los mismo valores al sidebar para que este quede abajo del DIV de contenido y siga siendo accesible.

dreknoun · 18 Jun 2014

johanso dijo:
ajjaja no problem,,,
bueno margin: 0 auto; centra el bloque pero debe de tener un ancho, un width, ya sean valores absolutos o relativos. claro que depende la situación.

Ni con el ancho definido, sigue en el mismo lugar. ¿Sería buena idea darle un margen de 10px izquierda para centrar el bloque si es diseño responsivo?

Fabián Rodríguez dijo:
Lo que comúnmente se hace en estos casos es darle al contenido un width:100% y display:block para que este ocupe todo el espacio, inmediatamente se le dan los mismo valores al sidebar para que este quede abajo del DIV de contenido y siga siendo accesible.

Hola Fabián, tienes razón, así no se desperdicia el sidebar que hay cosas importantes. Sin embargo lo pongo un display:block tanto al sidebar como al contenido (al sidebar le pongo el mismo width del contenido) y se me superpone el sidebar al contenido. :/

Fabián Rodríguez · 18 Jun 2014

No estoy 100% seguro de como se está mostrando con el cambio que haz hecho pero hay dos opciones:
1. Aplicar un overflow:hidden al sidebar
2. O un clear:both

dreknoun · 18 Jun 2014

Fabián Rodríguez dijo:
No estoy 100% seguro de como se está mostrando con el cambio que haz hecho pero hay dos opciones:
1. Aplicar un overflow:hidden al sidebar
2. O un clear:both

Gracias por la respuesta, ahora mismo no puedo subir una captura, pero se superpone el sidebar con el contenido.

El overflow:hidden no hizo nada, pero utilizar el clear:both lo solucionó. Ahora tengo el problema de que el sidebar no se redimensiona. Si le cambio los valores en el mismo sidebar (el width lo pongo a 100%) cuando veo el sitio completo se queda al 100%, si lo hago desde el Media Query el tamaño ni se inmuta. No sé que hacer :s

Menudo lío para mover un sidebar

Fabián Rodríguez · 18 Jun 2014

Si el sidebar se ve al 100% cuando está totalmente desplegado el navegador es porque estás aplicando ese 100% fuera del media query. Recuerda usar firebug o el inspector de elementos en Chrome para ver como está reaccionando tu sitio.
Puede ser que estés aplicando el width:100% a un elemento que no es el correcto.

MEGATRON · 19 Jun 2014

te recomiendo usar medidas EM en lugar de pixeles en las media queries. ya dentro de los valores si puedes usar pixeles o porcentajes.

Insertar CODE, HTML o PHP:

@media screen and (max-width: 59em) {
.supizq_p {
    display: inline-block;
}
.supizq_g {
    display:none;
}
nav.manuelita_pie img {
    padding: 0 200px 30px 200px;
}
.da-img img {
    width: 100%;
}
.da-slider {
    min-width: 100% !important;
}
.siconmanuelita li img {
    width: 50%;
}
}

Cómo ocultar el sidebar en pantallas pequeñas con CSS

dreknoun Seguir Seguidores 5

dreknoun Seguir

Seguidores

5