title: Media queries not working properly on mobile
body: <p>I'm currently working on a website and I've noticed that my media queries are working perfectly fine on the chrome emulator but not on my phone. 
  Basically on my mobile all the content seems pushed to the right side and even if I scroll horizontally i can't see all the content.
  What can cause this problem? </p>
  
  <p><img src="https://i.stack.imgur.com/zq7SY.png" alt="enter image description here"></p>
  
  <p>Viewport:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;
  </code></pre>
  
  <p>I used the media queries like in this example:</p>
  
  <pre><code>@media screen and (min-width: 840px) and (max-width : 1280px){...}
  </code></pre>
  
  <p><strong>application.css:</strong></p>
  
  <pre><code>html,
  body {
    height: 100%;
    font-family: 'Lato', sans-serif;
    /*margin-top: 30px;*/
  }
  
  .nav.navbar-nav {
    position: fixed;
    top: 25px;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .container {
    top: 45%;
  }
  
  .nav.navbar-nav li {
    text-transform: uppercase;
  }
  
  .nav.navbar-nav li a {
    /*text-shadow: 1px 1px 1px rgb(131, 131, 131);*/
    /*color: white;*/
    color: rgb(48, 48, 48);
    font-size: 1em;
  }
  
  .navbar-inverse .navbar-brand { color: rgb(48, 48, 48); }
  
  .navbar.navbar-inverse.navbar-fixed-top {
    background: -webkit-gradient(linear, center bottom, center top, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 1)));
    border-color: transparent;
    border-bottom: none;
    height: 60px;
  }
  
  .navbar-inverse .navbar-nav&gt;li&gt;a:hover, .navbar-inverse .navbar-nav&gt;li&gt;a:focus {
    color: #AA052A;
  }
  
  /*footer {
    margin: 50px 0;
  }*/
  
  @media only screen and (min-width: 768px) and (max-width : 991px) {
  
    .nav.navbar-nav {
      width: 60%;
    }
  
  }
  
  @media only screen and (max-width : 767px) {
  
    .container {
      -webkit-text-size-adjust: none;
      width: 100%;
    }
  
    .navbar-toggle {
      background-color: #333;
    }
  
    .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
      background-color: #AA052A;
      border-color: #AA052A;
    }
  
    .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
      border-color: transparent;
    }
  
    .nav.navbar-nav {
      top: 130px;
      left: 88%;
      width: 24%;
      margin-right: 15px;
    }
  
    .nav.navbar-nav li {
      background-color: rgba(226, 226, 226, 1);
    }
  
  }
  </code></pre>
  
  <p><strong>services.css:</strong></p>
  
  <pre><code>body { 
    background-color: white; 
    overflow: hidden;
  }
  
  #services {
    margin-top: 3%;
    width: 77%;
    position: absolute;
    top: 85px;
    left: 50%;
    transform: translate(-50%);
  }
  
  #services h1 {
    font-family: 'Great Vibes', cursive;
    font-size: 3em;
    color: #AA052A;
    /*font-weight: 700;*/
  }
  
  #p_services {
    padding: 0px 40px 0px 0px;
    line-height: 2;
    width: 70%;
    text-align: justify;
    color: black;
    font-weight: 300;
    font-size: 1.3em;
    display: inline-block;
  }
  
  #services img {
    float: right;
    width: 30%;
  }
  
  @media only screen and (min-width: 840px) and (max-width : 1280px) {
  
    #services h1 {
      font-size: 2.5em;
    }
  
    #p_services {
      width: 65%;
      font-size: 1.1em;
      padding: 0px 20px 0px 0px;
    }
  
    #services img {
      width: 33%;
    }
  
  }
  
  @media only screen and (max-width : 839px) {
  
    body { 
      overflow: visible;
    }
  
    #services h1 {
      font-size: 2em;
    }
  
    #p_services {
      font-size: 1.1em;
      width: 100%;
      padding: 0;
    }
  
    #services img {
      margin: 20px 0px;
      width: 100%;
    }
  
  }
  </code></pre>
  
  <p><strong>layouts.html.erb:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=League+Script|Rouge+Script|Parisienne|Niconne|Marck+Script|Allura|Alex+Brush|Tangerine:400,700|Great+Vibes|Dancing+Script:400,700|Pinyon+Script|Rochester|Sacramento|Arizonia' rel='stylesheet' type='text/css'&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700' rel='stylesheet' type='text/css'&gt;
      &lt;%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' =&gt; true %&gt;
      &lt;%= javascript_include_tag 'application', 'data-turbolinks-track' =&gt; true %&gt;
      &lt;%= csrf_meta_tags %&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
      &lt;%= render :partial =&gt; 'layouts/navbar' %&gt;
      &lt;%= yield %&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>_navbar.html.erb:</strong></p>
  
  <pre><code>&lt;!-- Navigation --&gt;
  &lt;nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"&gt;
    &lt;div class="container"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;a class="navbar-brand" href="/homepage"&gt;Glamour Hit&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;li&gt;
            &lt;%= link_to "Services", services_path %&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;%= link_to "Packages &amp; Prices", packages_and_prices_path %&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;%= link_to "Gallery", preview_pictures_path %&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;%= link_to "Contact", new_contact_path %&gt;
          &lt;/li&gt;
          &lt;% if user_signed_in? %&gt;
            &lt;li&gt;
              &lt;%= link_to "Sign out", destroy_user_session_path, method: :delete %&gt;
            &lt;/li&gt;
          &lt;% end %&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p><strong>index.html.erb(services):</strong></p>
  
  <pre><code>&lt;article id='services'&gt;
    &lt;h1&gt;...&lt;/h1&gt;
    &lt;p id='p_services'&gt;
      ...
    &lt;/p&gt;
    &lt;img src="&lt;%= asset_path('_MG_0414.jpg') %&gt;" /&gt;
  &lt;/article&gt;
  </code></pre>
  
  <hr>
  
  <p>Also does anyone know why the navigation bar is coming out like that? On the browser is a linear gradient from white to transparent. It should not be seen at all in this page.</p>