Ocultar Divs con CSS3 de acuerdo a la resolucion de Pantalla. PROBLEMAS!!

[nibollo]

Hola queridos compañeros! Quisiera pedirle una ayuda con un problema que tengo acerca de ocultar divs con css3 de acuerdo a la resolucion de la pantalla, preferi cambiarmee y leer un poco sobre css3 por que javascript me resulto complicado.. :(

Este es el codigo que deseo ocultar..

Código HTML:

<div class="search_and_share">
    <ul class="demo">
        <li><a href="http://localhost/all/" ><span class="inicio inicio-demo-all"></span>General</a></li>
    </ul>
    <ul class="demo">
        <li><a href="http://localhost/jobs/" ><span class="inicio inicio-demo-jobs"></span>Trabajo</a></li>
    </ul>
    <ul class="demo">   
        <li><a href="http://localhost/realstate/" ><span class="inicio inicio-demo"></span>Casas</a></li>
    </ul>
    <ul class="demo">   
        <li><a href="http://localhost/cars/" ><span class="inicio inicio-demo-cars"></span>Autos</a></li>
    </ul>
</div>
 

yo hice asi el css.. pero jamas me oculto nada.. :(

Código CSS:

@media screen and (max-device-max-height: 320px) and (max-device-max-width: 240px)  {
.search_and_share{
display:none
}
}
@media screen and  (max-device-max-height: 240px) and (max-device-max-width: 320px)   {
.search_and_share{
display:none
}
}
@media screen and (max-device-max-height: 320px) and (max-device-max-width: 480px)  {
.search_and_share{
display:none
}
}
@media screen and (max-device-max-height: 480px) and (max-device-max-width: 800px)   {
.search_and_share{
display:none
}
}
@media screen and (max-device-max-height: 640px) and (max-device-max-width: 480px)   {
.search_and_share{
display:none
}
}
@media screen and (max-device-max-height: 800px) and (max-device-max-width: 480px)   {
.search_and_share{
display:none
}
}
@media screen and (max-device-max-height: 800px) and (max-device-max-width: 600px)   {
.search_and_share{
display:none
}
}
@media screen and (max-device-max-height: 1024px) and (max-device-max-width: 600px)   {
.search_and_share{
display:none
}
}
@media screen and (max-device-max-height: 1024px) and (max-device-max-width: 768px)   {
.search_and_share{
display:none
}
}
 

Noseeee que puedeee estar maal.. pero probee en varios dispositivos moviles asi como en saucelabs.com y en quirktools.com/screenfly/ .Seria tan buenoo que alguien me pudiese ayudar, nose si esta mal el planteamiento.. Pero de Antemano Muchas Gracias!!

[chrishxc]

Desconozco el código que usas. Yo uso el siguiente y funciona:

Código:

@media handheld, only screen and (max-width: 767px) {
.search_and_share{
display:none;
}
}

@media only screen and (max-width: 1023px) {
.search_and_share{
display:none;
}
}

Mano de santo ;)

[nibollo]

Iniciado por chrishxc

Desconozco el código que usas. Yo uso el siguiente y funciona:

Código:

@media handheld, only screen and (max-width: 767px) {
.search_and_share{
display:none;
}
}

@media only screen and (max-width: 1023px) {
.search_and_share{
display:none;
}
}

Mano de santo ;)

Ahoraaa lo voy a probar!! Disculpame que tarde un poco, el trabajo estaba pesado.. y te facilito de donde saque el codigo http://www.w3.org/TR/css3-mediaqueries/ "Example 24" .. Muchas gracias!

[nibollo]

Iniciado por chrishxc

Desconozco el código que usas. Yo uso el siguiente y funciona:

Código:

@media handheld, only screen and (max-width: 767px) {
.search_and_share{
display:none;
}
}

@media only screen and (max-width: 1023px) {
.search_and_share{
display:none;
}
}

Mano de santo ;)

FUNCIONO DE MARAVILLA!!!! GRACIAS COMPAÑERO!!! 100% RECOMENDADO!