[SOLUCIONADO] Código para móviles

[Jhon Silver]

Que tal amigos?
Tengo el siguiente código:

Código CSS:

@media only screen and (max-width: 470px) {
    img.center {
        float: none;
        margin: auto;
        display: block;
        margin-bottom: 10px;
    }
}
 

Para que que se vea correctamente en dispositivos móviles.
El caso es que si hago la llamada a través:

Código CSS:

<link rel="stylesheet" type="text/css" media="all" href="style.css">
 

No consigo que se vea correctamente en móviles, por lo que no actua.
Sin embargo si pongo el mismo código en la misma página de manera

Código CSS:

<style> @media only screen and (max-width: 470px) {
    img.center {
        float: none;
        margin: auto;
        display: block;
        margin-bottom: 10px;
    }
}</style>
 

Si se ve adaptado para móviles. Pero es mucho trabajo ir fichero por fichero.
¿Sabeis cómo podría solucionarlo, de manera que lo lea desde el fichero style.css?

[AngelKrak]

amigo tengo una duda, acaso pones los <style> tambien en la hoja de estilos? si es asi te estas equivocando y por eso no te funcionan los estilos ;) otra seria la ruta, fijate que este bien especificada la ruta del CSS ;)

CSS(en la hoja de estilos.css no llevan etiquetas <style>):

Código CSS:

@media only screen and (max-width: 470px) {
    img.center {
        float: none;
        margin: auto;
        display: block;
        margin-bottom: 10px;
    }
}
 

[Jhon Silver]

En el archivo raiz style.css incluyo este código sin la etiqueta <style>:

Código CSS:

.container {
        width:996px;
        margin:0px auto;
        font-size:1em;
    }
    section,aside {
        padding: 10px;
        background:#F5F5F5;
        -moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px;
    }
    section {
        float: left;
        width: 70%;
    }
    aside {
        float: right;
        width: 25%;
    }
    nav {
        overflow: hidden;
    }
    nav ul {
        list-style-type:none;
        float:left;
        padding:0px;
    }
    nav ul li {
        float:left;
        padding:3px 10px;
        margin:2px;
        background:#0099CC;
        -moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 80%;
        font-color: #ffffff;
    }
    footer {
        margin:10px;
        text-align:center;
        clear:both;
    }
 
    /* para 980px o menos */
    @media screen and (max-width:980px) {
        .container {
            width:98%;
        }
        section {
            width:68%;
        }
    }
 
    /* para 700px o menos */
    @media screen and (max-width:700px) {
        aside,section {
            float:none;
            width:96%;
        }
        nav, section {
            font-size:1.2em;
        }
        aside {
            margin-top:5px;
        }
        nav ul {
            float:none;
            clear:both;
        }
    }
 
    /* para 480px o menos */
    @media screen and (max-width:480px) {
        aside {
            display:none;
        }
        nav, section {
            font-size:1.5em;
        }
        section {
            width:94%;
        }
        nav ul {
            float:left;
            clear:none;
            width:50%;
        }
        nav ul li {
            float:none;
        }
    }
    
    @media only screen and (min-width: 500px) {
    div.banner_mobile {
        display: none;
    }
    
    div.banner_pc {
        display: block;
    }
}
 
@media only screen and (max-width: 499px) {
    div.banner_pc {
        display: none;
    }
    
    div.banner_mobile {
        display: block;
    }
}
 
@media only screen and (max-width: 470px) {
    img.alignright {
        float: none;
        margin: auto;
        display: block;
        margin-bottom: 10px;
    }
}
 

Entre las líneas 112 y 119 esta el codigo al que hago referencia

Hago la llamada a través de la línea de código

Código CSS:

<link rel="stylesheet" type="text/css" media="all" href="style.css">
 

En la etiqueta img <img src="imagen/buscar-vivienda.jpg" class="center">

Hay algo que no esta bien porque la última parte del código no actua, pero no se que es.

[AngelKrak]

amigo si la imagen tiene de clase .center tu css deberia de ir asii ._.

Código CSS:

img.center{
        float: none;
        margin: auto;
        display: block;
        margin-bottom: 10px;
    }
 

[Jhon Silver]

Efectivamente gracias. Con tanto código me confundi en asignar la clase, se la había dado diferente por eso no lo leia.