html - Tips on making responsive website fit for mobile -

i'm trying use css media queries optimise website mobile view, , using google chrome extension resize viewport on desktop adjust content mobile.

the problem i'm having when i'm designing , changing on laptop @ mobile phone resolution, works fine (see first picture) when load website on mobile, i'm not getting same view i'm getting laptop (see second picture).

i've used

<meta name="viewport" content="width=device-width, initial-scale=1"> 

to set width mobile

i know font different because it's third party i've installed onto laptop thats not problem.

just wondering if theres easier way of creating responsive views mobile such using applications phonegap or if can give me tips on how create responsive content mobile.

thanks in advance

edit: second picture larger because screenshot mobile phone, screen sizes aren't different.

i suggest watching new boston's responsive web design playlist:

he teach important basic concept of responsive design using percentage , creating own custom menu or button in responsive mobile version(that makes mobile app in browser).

https://www.youtube.com/watch?v=ywgl3xxvlhi&list=pl6gx4cwl9dgbatsb1nse1uu48d_q7glgt