Media query with rails bootstraps-saas

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 ?

To whom are you giving those style? Where is the element(s) selector? — Vucko, Jan 30 '16 at 08:43
Your style should work. Inspect the element and see if something is overriding those styles. — Vucko, Jan 30 '16 at 09:10
nothing special in my inspection, the background keep the background color #ffffff that i set for my .post in the application.css.scss — jmcastel, Jan 30 '16 at 09:32
@jmcastel, do you have strings `*= require_tree .` and `*= require_self` in your `application.css.scss`? — Igor Ivancha, Jan 30 '16 at 12:41
@jmcastel, `*= require_tree .` with space and dot. after you add it, restart server — Igor Ivancha, Jan 30 '16 at 13:09
open your app with dev-tools and inspect there why doesn't work — Igor Ivancha, Jan 30 '16 at 18:44

score 0 · Answer 1 · answered Jan 30 '16 at 10:31

0

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

answered Jan 30 '16 at 10:31

yottanami

377
2
7

1

unfortunately this doesn't change anything – jmcastel Jan 30 '16 at 11:06

score 0 · Answer 2 · edited May 23 '17 at 11:59

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

score 0 · Answer 3 · answered Feb 01 '16 at 10:12

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 :)

Media query with rails bootstraps-saas

3 Answers3