Modificar un Div Si se carga desde un Movil

[atahualpa_666]

Mi Problema es el siguiente,
Estoy creando una pagina editando una plantilla de wordpress, la propia plantilla se carga perfectamente desde dispositivos moviles, el problema es que añadi un div bajo el texto para difuminar un logotipo que se oculta detras, el div lo centre añadiendo margenes a lo alto y por abajo en pixeles, pero cuando lo carga un dispositivo movil, esos pixeles deberian ser diferentes.

La pregunta es si alguien puede orientarme o si hay una manera de modificar el stylo css para que cargue automatico si es un telefono movil.

he visto que hay una opcion

Código HTML:

media=”handheld”

para detectar si es un dispositivo movil pero por mas que he buscado en la cabecera de la plantilla no encuentro como detecta si es un movil.

[ArturoGallegos]

Puedes usar CSS media queries, es lo mas común últimamente para dar estilos a los elementos según la resolución de la pantalla.

[atahualpa_666]

OH gracias, parece que es eso lo que andaba buscando.

a ver si puedes orientarme un poquito mas que ando algo perdido en este tema, el css de la plantilla de wordpress que estoy utilizando trae optimizado para moviles utilizando los media queries que acabas de descubrirme.

Este es el div que añadi para meter trasparencias al hacer scroll sobre el logotipo de la pagina

#logo{
margin-left: auto;
margin-right: auto;
top: 20px;
left: 50%;
margin-top: 0px;
margin-left: -150px;
position:fixed;
}

#difuminalogo{
position: absolute;
margin-left: auto;
margin-right: auto;
left:0;
right:0;
top: 295px;
bottom: 54px;
background-color: white;
width:300px;
opacity: 0.85;
filter: alpha(opacity=85);
}

habra una manera facil utilizando los media queries para que el logo quede fijo

position:absolute;

y no carge el div de trasparencia si se visiona la pagina desde cualquier dispositivo movil?

[ArturoGallegos]

no entiendo tu problemática.... has leído y entendido algo sobre media queries???

prueba con alguno de estos dos:

Código CSS:

@media only screen and (max-device-width: 600px) {
    #difuminalogo{display;none;}
}
@media only screen and (max-width: 600px) {
    #difuminalogo{display;none;}
}
 

[atahualpa_666]

Oh gracias ya entendi, no sabia lo de display;none, no me dedico profesionalmente a esto y hay cosas que no conozco bien.

Estube probando con tu ejemplo pero lo sigue cargando igualmente, probe a añadirlo dentro de cada resolucion que traia la plantilla css pero al cargar la pagina desde el telefono carga el div de todos modos.

te adjunto el trozo de css referente a los media queries, seguramente este cometiendo algun error de novato

Código CSS:

@media screen and (max-width: 900px) {
    #main.col480 {
        width:64.667%;
        margin-left:0;
        display:block;
    }
    
    #sidebar.col220, #sidebar-left.col220 {
        float:right;
        width:31.333%;
        clear:right;
    }
    
    #sidebar-left.col220 { 
        margin-left:0;
    }
}
 
@media screen and (max-width: 824px) {
    #access, div.menu { position:relative; }
    .menu ul li { list-style-type: none; float:none; }
    nav[role=navigation] ul.menu {
        background:#c0c0c0; 
        position:absolute;
        top:41px;
        z-index:9999;
        display:none;
    }
    nav[role=navigation] ul.menu li a {
        display:block;
        color:#fff;
        text-shadow:-1px -1px #999;
    }
    nav[role=navigation] ul.menu li a:hover {
        background:#c9c9c9;
    }
    
    nav[role=navigation] .menu #menu-icon { display:block }
    
    .menu ul li ul.sub-menu, .menu ul li ul.children { display:none; }
}
 
@media screen and (min-width: 824px) {
    nav[role=navigation] ul.menu { display:block !important; }
}
 
@media screen and (max-width: 680px) {
    
    #main.col480 {
        width:100%;
        display:block;
        float:none;
        margin:0;
    }
    
    #sidebar.col220, #sidebar-left.col220 {
        float:none;
        display:block;
        width:100%;
        clear:both;
    }
    
    #sidebar-left.col220 { 
        margin-left:0;
    }
    
    .widget {
        margin:2.2em 30px 2.2em 20px;
    }
}
 

[pzin]

No veo yo en ese código el #difuminalogo{display;none;} que te dijo ArturoGallegos.

[atahualpa_666]

ese es el original de la plantilla sin modificar pero le añadi el

Código HTML:

#difuminalogo{display;none;}

dentro de cada @media para todas las resoluciones y aun asi nada

[ArturoGallegos]

bueno dado que no te dedicas a esto y ni siquiera conocías el display:none no me queda mas que mandarte a estudiar... pasa a este link y empieza, por lo mientas investiga sobre jerarquías y el atributo important del CSS, con eso solventaras tu problema.... si no es así pues a estudiarle que no tiene mucho caso que sigamos dando respuestas si no entiendes mucho del tema.

En el foro estamos para ayudarte con mucho gusto pero la idea es de que aprendas.

http://librosweb.es/

Por cierto como bien dijo @Bonez en el CSS no has aplicado display none en la ID que te indique, quizás lo agregaste pero no guardaste el documento, por ende se perdió el cambio y tienes la idea de que no funciona.

[atahualpa_666]

Gracias, has sido de gran ayuda, aun no lo he solventado pero seguro que dare con ello, me has orientado en una buena direccion, antes estaba totalmente perdido