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
Post a Comment