Estou praticando web design responsivo. Pelo que aprendi até agora, ele gira em torno de uma grade fluida com componentes fluidos e consultas de mídia CSS.

O site se parece com o que eu quero em um telefone celular quando eu reduzo meu navegador:

No entanto, quando no meu celular, depois de ser colocado no meu servidor da Web, parece completamente diferente:

Eu acho que existe algum conflito entre a largura e a largura do dispositivo que está ocorrendo. Alguém sabe o que está errado?

É assim que eu carrego minhas folhas de estilo:

<link href="/stylesheets/index.css" rel="stylesheet" type="text/css" /> 
<link href="/stylesheets/mobile.css" rel="stylesheet" type="text/css" media="screen and (max-width: 600px), screen and (max-device-width: 600px)" />