Media query with rails bootstraps-saas - ruby-on-rails

Question

I m trying to make media queries with bootstraps. I put this in my application.css.scss file but that doesn't work :
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require 'masonry/transitions'
*= require_tree
*= require_self
*/
#import "bootstrap-sprockets";
#import "bootstrap";
#import "font-awesome";
$backgroundNav : #ffffff;
$backgroundBody : #E9E9E9;
$red : #FD0E48;
#media screen and (max-width: 770px){
.body {
background-color: red;
}
}
body {
background: $backgroundBody;
}
What should i do in order to make the query to be detected ?

Answer 1

Application.css.scss is a manifest file and you should define which files you need to require.
If you want to compile codes in your application.css.scss you should add = require_self in top of your application.css.scss

Answer 2

I believe you have the wrong selector.
.body {
background-color: red;
}
.body selects an elements with the class body, like <div class="body">foobar</div>
You probably meant to select the body element:
body {
background-color: red;
}
Also, put your #media styles after the "normal" ones.
body {
background: $backgroundBody;
}
/* responsive body styles */
#media screen and (max-width: 770px){
body {
background-color: red;
}
}
Here's the fiddle - resize the window to see the change.
And since RoR has SASS support, why not use it?
body {
background: $backgroundBody;
#media screen and (max-width: 770px){
background: $backgroundBody;
}
}

Answer 3

First of all your CSS in the media query is wrong.
It should be:
body {
background-color: red;
}
and not .body as it will search for element that has class "body", example:
<p class="body>
content
</p>
Secondly try to write your media queries (#media styles)after your general css towards the end of the files, i think that should fix the issue.
Hope that helps :)