Posted by suisui on August 4, 2011 at 5:46pm
4 followers
Jump to:
| Project: | Omega |
| Version: | 7.x-3.0-rc3 |
| Component: | Miscellaneous |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed (works as designed) |
Issue Summary
Hello omega.
First, I would like to say omega theme is amazing.
I love to use it as base theme however I have some doubt.
I notice in 'alpha-default-narrow-12.css', the body min-width: 720px.
However, most of the mobile device is 320*480px.
My doubt is how those device smaller than 720px(eg:320*480px) handle the 720px theme?
Do I have to create another mobile them that fit 320px?
Thanks.
Comments
#1
What you might want to do is create your own alpha-default-narrow-12.css that you want for your target display size and modify the css to suit your requirements. Then change the media query layout settings to feed your CSS for your screen size.
See:
http://mydrupaljourney.com/articles/2011/06/30/omega-starterkit-css-files
and:
http://mydrupaljourney.com/articles/2011/06/24/omegas-grid-layout-settings
#2
wait wait wait...
the 720px version (as default narrow option) is only valid for those browsers > 720px...
by default anything less than that the regions are simply stacked... use Chrome (as it scales down to 400px width) and you can see the regions all stacked for a mobile version...
This IS the mobile-first philosophy ...
ALL the media query layouts (narrow, normal, wide) are for browsers that are above mobile. All things that apply to mobile version would go in your global.css and then be overwritten (as needed) in the other responsive sizes.
#3
My mistake, I thought suisui wanted to specifically target that display size, not use the Omega subtheme defaults. The great thing about Omega is that you can modify the css and the layout settings to target specific display sizes in any number of ways.
#4
Thanks JSCSJSCS and Himerus for those links and explanations.
To make sure I understand, I express my understanding with a scenario where a website display different logo size on different devices. Correct me if I wrong.
Logo and target devices:
- small logo --> smart phone, screen resolution smaller than 720px
- big logo --> ipad, screen resolution between 720px and 960px
- bigger logo --> desktop, screen resolution between 960px and 1200px
- biggest logo ---> desktop, screen resolution larger than 1200px
Below is how I should style my css.
~ global.css
- any styles that consistent with any devices, e.g: font
- target on any devices
~ YOURTHEME-alpha-default.css
- any styles for resolution smaller than 720px layout
- small logo
- target on smart phone, screen resolution smaller than 720px
~ YOURTHEME-alpha-default-narrow.css
- any style for 720px layout
- big logo
- target on ipad, screen resolution between 720px and 960px
~ YOURTHEME-alpha-default-normal.css
- any styles for 960px layout
- bigger logo
- target on desktop, screen resolution between 960px and 1200px
~ YOURTHEME-alpha-default-wide.css
- any styles for 1200px layout
- biggest logo
- target on desktop, screen resolution larger than 1200px
Correct me if I am wrong. Thanks.
#5
The only thing wrong with your outline is in the THEME-alpha-default.CSS
That one applies to ALL of the responsive sizes, so really only gets styles that are global for the narrow, normal and wide layouts. Anything specific would reside in the appropriate CSS file for the specific layouts.
#6
Thanks for fast response.
I still have a bit confuse on css file.
My assumption on css file are global.css for all style that universal on any layouts while THEME-alpha-default.css for styles on devices less than 720px. Based on your answer on post #5, I know my assumption is wrong.
May I know what the different between global.css and THEME-alpha-default.CSS ?
Thanks for your helps.
#7
Mkay... here it is...
global.css -> applies to MOBILE AND ALL responsive layouts... it's the base stylesheet that applies on ANY view of the site.
THEME-alpha-default.css ONLY applies on any browser capable of understanding media queries (and IE in default mode) BUT this stylesheet will apply to ALL the responsive layouts (narrow, normal, wide)
THEME-alpha-default-narrow.css - applies to narrow layout AND anything after it (normal, wide)
THEME-alpha-default-normal.css - applies to normal layout AND anything after it (wide)
THEME-alpha-default-wide.css - applies to wide layout ONLY (unless you create one after it in the chain)
These are how it works out of the box... however, because of the customizable media queries, you can create custom media queries/grids, etc. and then it gets a bit more complex, but the above description is the out of the box Omega subtheme.
#8
Thanks - that's very useful
Maybe consider adding those statements to the comments at the top of the blank stylesheets so it is clear what each one does? The existing comments are not too helpful IMO.