Override css using responsive stylesheets [#2063021]

Hi. Maybe I didn't well understand how adaptivetheme works with responsive stylesheets.
I have a subtheme of Adaptivetheme v.7.x-3.1.
CSS aggregation is OFF.
I have default set for "Mobile first or Desktop first" (so it is "Mobile first", right?).
I have many css style in the responsive stylesheet...but when I look at my site in the mobile device the style is that in base template (or in at core template) why??
How exactly css works? what is the iter it follows in cascading way?
Hoping I explain what is my problem.
Thank you

Comments

Comment #1

Jeff Burnz CreditAttribution: Jeff Burnz commented 12 August 2013 at 15:50

Depends on the breakpoint. Responsive design does not care about your device, it only cares about the screen resolution (size), you can easily test by simply making your browser smaller. Turn on the option to show the screen size (in theme settings check Debuggers > Show Window Size), then check your breakpoints (media queries set in each group of settings, i.e. Standard, Tablet and Smartphone/Smalltouch (the last one depends on which version, the dev version uses 'Smalltouch').

Remember that devices don't matter - your mobile device could have a very large resolution (such as some of the larger Samsung tablets), so might be using the "Standard Layout" because that's what matches in the media query.

Comment #2

eletomm CreditAttribution: eletomm commented 13 August 2013 at 07:54

Thank You very much for quick answer! This help me understand some things. Anyway I still don't understand how exactly stylesheets work:
I set some styles in globalstyle.css that are common to all layouts, except for the "smartphone portrait layout" . So I modified in smartphone-portrait-layout.css the corresponding styles...anyway when I have a make window of any browser smaller it still continues to see the style of the element as per global-style.css (I do refresh all cashes and checked with firebug ..)
So my question is:what is the order in the cascading style stylesheets: i.e.: I set input.form-text style ="width 500px" in the global-style.css and input.form-text style ="width 200px" in the responsive-smartphone-portrait-style.css : what value the browser will show when I am with small browser window? I thought it should be the value in responsive-smartphone-portrait-style.css, but in effect what I see with firebug is the value set in the global-style.css : why?
Where I am wrong?
Thank you so much