html - Media Queries not working in Chrome, works in Firefox -


i have whole range of stylesheets specific many different resolutions. link them using references in header, such as:

<link rel="stylesheet" media="(min-width: 1024px) , (max-width: 1024px)" href="http://site.com/child-theme/1024.css" /> 

in firefox work without hitch, in chrome (and possibly safari) doesn't honor media queries, though detects/sees them viewable in firebug, crossed out.

can't life of me figure out... solving puzzle appreciated!

my (wordpress) site is: hbb-inc.com view how should look, check out in firefox... , compare in chrome.

it's because of nature of css, stands cascading style sheets.

an amended quote on number of places on internet:

cascade special part. style sheet intended cascade through series of style rules, river on waterfall. water in river hits rocks in waterfall, ones @ bottom affect water flow. same true of cascade in style sheets.

in other words, because media="all" style sheets linked lower down in head section affecting of same elements have styled earlier in process.

i think moving style sheets media attribute set all start of head section fix problem


Comments

Popular posts from this blog

SPSS keyboard combination alters encoding -

Add new record to the table by click on the button in Microsoft Access -

CSS3 Transition to highlight new elements created in JQuery -