[SOLUCIONADO] ¿Qué falla?

[diegoguerrero]

Con el siguiente código me sale siempre la versión para dispositivos grandes. ¿Qué falla en el código?

index.html

Código HTML:

<link href="peque.css" type="text/css" rel="stylesheet" media="max-width:700px">
<link href="grande.css" type="text/css" rel="stylesheet" media="min-width:700px">
 

peque.css

Código CSS:

#izquierda{
        width: 100%;
        display: inline-table;
        text-align: center;
        align-content: center;
    }
    #derecha{
        width: 100%;
        display: inline-table;
        text-align: center;
        align-content: center;
    }
 

grande.css

Código CSS:

#izquierda{
        width: 49%;
        display: inline-table;
        text-align: center;
        align-content: center;
    }
    #derecha{
        width: 49%;
        display: inline-table;
        text-align: center;
        align-content: center;
    }
 

[AngelKrak]

amigo en esta linea en vez de tenga el mismo ancho que el peque, ponle 1px mas ;)

Código HTML:

<link href="grande.css" type="text/css" rel="stylesheet" media="min-width:701px">
 

con eso imagino que no tendras problemas ;)

[diegoguerrero]

Pues la verdad es que me sigue dando problemas y ya no sé cómo solventarlo. Por si alguien no lo entendíó, lo que me sucede es que siempre hace caso del grande.css.

[AngelKrak]

creo que ya habia visto un tema sobre esto jajaja xD

pon tus estilos alrevez amigo ;) recuerda que CSS son Estilos en Cascada, lo cual siempre el primero que va a agarrar sera el de hasta abajo ;)

Código HTML:

<link href="grande.css" type="text/css" rel="stylesheet" media="min-width:701px">
<link href="peque.css" type="text/css" rel="stylesheet" media="max-width:700px">
 

si aun asi no funciona al pequeño ponle(cámbialo por) esto en el media ;)

Código HTML:

all and (min-width: 100px) and (max-width:700px)