3

I'm using Ruby on Rails and I have all my styling set in application.css.scss as so

body{
    //GLOBAL STYLES

    @media only screen and (max-width: 770px){
        //MOBILE ONLY STYLES
    }

    @media only screen and (min-width:771px) and (max-width:1040px){
        //TABLET ONLY STYLES
    }

    @media (min-width: 771px){
        //STYLING COMMON TO BOTH TABLET AND DESKTOP
    }

    @media (min-width: 1040px){
        //DESKTOP ONLY STYLES
    }

}

When I resize my browser all, the media queries seem to work fine but none of the mobile styling is showing on my phone. Any help as to why this is would be much appreciated.

SoSimple
  • 701
  • 9
  • 30

1 Answers1

0

Responsive

Although I'd love to declare media queries on a per element basis, we've only had it working before by calling them explicitly on their own:

#app/assets/stylesheets/application.css.scss
@media screen and (max-width: 770px){
   body   { ... }
   footer { ... }
}

@media screen and (min-width:771px) and (max-width:1040px){
   body   { ... }
   footer { ... }
}

You can see some of our responsive styling here

--

By the way, media queries are not specific to SASS/SCSS :)

Richard Peck
  • 76,116
  • 9
  • 93
  • 147
  • 1
    I know it's not, I just figured it's best to specify that I'm not using pure css. Also thanks for the tip, I've part tested it out and it seems okay so far. I'll accept your answer once I've tested everything out in production as well. – SoSimple Aug 21 '14 at 11:08
  • Thanks bud - let me know if it works etc :) – Richard Peck Aug 21 '14 at 11:14
  • 1
    Sorry for the wait, changing my media queries and adding a meta tag as suggested by the possible duplicate link worked. Thanks for all your help! – SoSimple Aug 22 '14 at 09:14