Search code examples
cssmedia-queriesviewportmeta

Media queries not working properly on mobile

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?

enter image description here

Viewport:

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

I used the media queries like in this example:

@media screen and (min-width: 840px) and (max-width : 1280px){...}

application.css:

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>li>a:hover, .navbar-inverse .navbar-nav>li>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);
  }

}

services.css:

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%;
  }

}

layouts.html.erb:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <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'>
    <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700' rel='stylesheet' type='text/css'>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
  </head>
  <body>

    <%= render :partial => 'layouts/navbar' %>
    <%= yield %>

  </body>
</html>

_navbar.html.erb:

<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/homepage">Glamour Hit</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li>
          <%= link_to "Services", services_path %>
        </li>
        <li>
          <%= link_to "Packages & Prices", packages_and_prices_path %>
        </li>
        <li>
          <%= link_to "Gallery", preview_pictures_path %>
        </li>
        <li>
          <%= link_to "Contact", new_contact_path %>
        </li>
        <% if user_signed_in? %>
          <li>
            <%= link_to "Sign out", destroy_user_session_path, method: :delete %>
          </li>
        <% end %>
      </ul>
    </div>
  </div>
</nav>

index.html.erb(services):

<article id='services'>
  <h1>...</h1>
  <p id='p_services'>
    ...
  </p>
  <img src="<%= asset_path('_MG_0414.jpg') %>" />
</article>

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.

Solution

  • It is because of your media queries.

    Try doing somethign along these lines:

    @media all and (max-width:736px) {
    #services {
        margin-top:60px; // The height of your navigation bar
        width: 100%; // Full width of your mobile screen
        position: static; // Get rid of absolute positioning
        padding: 1em; // Add some spacing so the text isn't right up against the edge of the screen.
    }

    On my iOS Simulator, that's instantly making it look much better for mobiles, although I haven't touched the navigation, but it will the same thing (mainly the absolute positioning, and the left:50%)