Hi

i have omega 3 installed. I would like the mobile.css to override the style when the browser is resized to it's narrowest. At the moment the page re-sizes for mobile but the styles.css keeps overriding the mobile.css. I have changed the weight in the info of both styles file but all that does is make the mobile.css override the style.css for the whole site. It just reverses which style is loaded.

Has it something to do with the media queries not being loaded on the site and is there a way to change the css with different browser sizes.

Thanks
Jimmel

Comments

fubhy’s picture

fubhy commented
Status: Active » Closed (fixed)

mobile.css is the weakest element in the chain, meaning that it gets overridden by EVERYTHING that follows (which is basically everything else...). Style.css should contain styles that are common to BOTH! (mobile and non-mobile)... mobile.css should contain styles that are ONLY relevant for the mobile version of your site and finally the "YOURTHEME-alpha-default.css" (in case you have the "Default" grid active) should contain styles that are ONLY relevant for the NON-MOBILE version of your site.

This is the structure and whole idea of how your CSS should be arranged. This will give you what you want!

Jimmel’s picture

Jimmel commented

That works fine. I was missing the "YOURTHEME-alpha-default.css" file. It makes structural sense to me now.

Just out of curiosity what works if you have the fluid grid active instead of the default. With this active the css seems to return from a number of places. Is there a "YOURTHEME-alpha-fluid-default.css" file I can place in the subtheme to override the fluid grid just as with the default selection.

Thanks for the quick answer.
Jimmel