Responsive width is too small on phone, but okay on desktop browser

Issue

I am practicing responsive web design. From what I've learned so far, it revolves around a fluid grid with fluid components, and CSS media queries.

The website looks just like how I want it to look like on a mobile phone when I shrink my browser:

However, when on my mobile phone, after being put on my web server, it looks completely different:

I think there is some conflict between width and device-width that is occurring. Does anyone know what is going wrong?

This is how i load my stylesheets:

<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)" /> 

Solution

There is not responsive without viewport meta tag

<meta name="viewport" content="width=device-width, user-scalable=no">

More about viewport meta tag https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag

Answered By - Melvinr