Search code examples
htmlcssruby-on-railsrubymedia-queries

Media queries ignored in ruby on rails

I am creating a project in Cloud9 Ruby on rails. I have only one css file in index.html.erb :

<!DOCTYPE html>
<html>
<head>
  <title>Workspace</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

I put a media query in Application.css:

@media only screen and (min-width: 290px) and (max-width: 640px) and  (-webkit-device-pixel-ratio: 2) { 
  .container2 {
      position:relative;
      background-color:red;
      text-align: center;
      width:100%;
      height:100%;
      border-bottom-style: ridge;
      border-top-style: ridge;
      border-width:10px;
}
  #list {
    font-size: 50px;
  }


  }

If you visit the link: https://todo-app-back-end-prospeed.c9users.io/?_c9_id=livepreview0&_c9_host=https://ide.c9.io , you will see the .container2 did not turn red when it reached 600px.

Solution

  • Your query is working fine. Need some tweaking while inspecting it. I hope you are using Chrome to inspect the behavior.

    If you select the Desktop then your CSS will be working fine otherwise it does not. And while testing don't forget to set the DPR to 2.0

    enter image description here

    To fix just add the following under <head> tag.

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