Posted by westis on June 16, 2012 at 11:11am
I wonder what the best approach is to get a layout similar to the one described at http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach-t...
That is, a fluid layout but with breakpoints where columns or font sizes are changing.
With Omega, if I choose only fluid layout I get only two versions, one for mobile and one for the rest, or three if also wide is enabled. If I enable also narrow or normal, then I kind of lose the point of the fluid layout. But I'd like to set other options for the breakpoints of narrow and normal other than the grid sizes.
Comments
Since I didn't get a response
Since I didn't get a response I rephrase my question to see if I might get some ideas on how others are implementing this.
I would like to change font-size and other elements for different breakpoints, like narrow (740px) and normal (1024px), even when using fluid layout. But if I enable "Narrow" and "Normal" I no longer get a fluid layout, since I also get the alpha grid layouts for narrow and normal.
Do I somehow need to override the alpha grid CSS files in my sub-theme to accomplish this?
I assume you can put the
I assume you can put the media queries for the font sizes etc. in the global.css.
@media all and (min-width: 740px) and (min-device-width: 740px), (max-device-width: 800px) and (min-width: 740px) and (orientation:landscape) {
body {font-size: 1em;}
}
@media all and (min-width: 980px) and (min-device-width: 980px), all and (max-device-width: 1024px) and (min-width: 1024px) and (orientation:landscape) {
body {font-size: 1.2em;}
}