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

  • Autor Autor dreknoun
  • Fecha de inicio Fecha de inicio

dreknoun

Iota
Diseñador
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
¡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.
 
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
 
Última edición:
Como ya dijeron lo puedes lograr con media queries.
 
con Media Queries lo puedes hacer.

Te dejo un ejemplo:

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

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

saludos.
 
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.
Hacer clic para expandir...

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; }
}
Hacer clic para expandir...

¿Estoy colocando algo mal?
 

prueba como te lo dije.
@media screen and (max-width: 524px) {

}
Hacer clic para expandir...

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.
 
Última edición:
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...
 
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%;}
}
Hacer clic para expandir...
[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;
Hacer clic para expandir...

Eso sería suficiente para centrar todo el contenido?
 
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.
 
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.
 
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.
Hacer clic para expandir...

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?


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. :/
 
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
 
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
Hacer clic para expandir...

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 😕
 
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.
 
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%;
}
}
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

Cómo ocultar banners en pantallas pequeñas con código HTML
Respuestas
8
Visitas
900
vbluis
Menú
Acceder
Registro