As I understand it, the media query breakpoints for Omega, out of the box are:
Narrow: all and (min-width: 740) and (min-device-width: 740px), (max-device-width: 800px) and (min-width: 740px) and (orientation:landscape)
Normal: all and (min-width: 980px) and (min-device-width: 980px), all and (max-device-width: 1024px) and (min-width: 1024px) and (orientation:landscape)
Wide: all and (min-width: 1220px)
I'm attempting to set up a theme for content that will be inserted into a web page via iframe, so the current breakpoints are to wide for my need and I need to alter them to support narrower breakpoints. However, when I even start to test style sheets being loaded correctly, Omega is bypassing the Narrow version and going straight from Normal to Global. In other words if the global page is orange, the narrow page is blue, the normal page is green and the wide page is yellow, when I downsize the browser width to 820px, I'm not getting a blue background, as I think I should. It appears that all stylesheets are being loaded, but the narrow version is avoided.
Am I missing something here?
Secondly, if I want to set narrower widths, is it simply a matter of adjusting the values as follows?
Narrow: all and (min-width: 480) and (min-device-width: 480px), (max-device-width: 800px) and (min-width: 480px) and (orientation:landscape)
Normal: all and (min-width: 640px) and (min-device-width: 640px), all and (max-device-width: 720px) and (min-width: 720px) and (orientation:landscape)
Wide: all and (min-width: 780px)
I do seem to get adjustments appropriately when I do that, but again, I'm not seeing the 'Narrow' style.
Comments
Narrow style not loading?
Hmm...
Have you flushed your browser cache after making the style updates?
I know (from much experience) that it can be frustrating to get Omega to work properly, at times. Is there a certain element in the global.css styles that is overriding your Narrow? Is the Narrow option turned on in the theme?
As for the breakpoints, those can be manually adjusted, and for the iFrame, is it possible for most sizes to set the width to 100%, so that its container element can take care of sizing for you at different breakpoints?
Narrow Style
After clearing the cache, check it again to see if its loading. Examine the HTML page source to see what style sheets are loading.
Ken Weigand
Billp44ruby: Are you using
Billp44ruby:
Are you using older versions of Internet Explorer? IE8 won't load narrow.css. If that's the case, move your CSS from Narrow>Default
Premium Drupal Commercial themes