Media query breakpoints

Events happening in the community are now at Drupal community events on www.drupal.org.
billp44ruby's picture

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?

karolus's picture

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

kweigand's picture

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

mherchel's picture

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

Omega Framework

Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds:

Hot content this week