CSS not working in Chrome

Comparing css links between the page you referenced and sub-pages, you have a "media" attribute in your link:

Problem:

<link href="/stylesheets/css_Sanford.css" rel="stylesheet" type="text/css" media="only screen and (min-device-width: 481px" />

Working:

<link href="/stylesheets/css_Sanford.css" rel="stylesheet" type="text/css" />

Try removing the "media" attribute and it should work fine.

More specifically, it does not appear that "only" is a valid operating for the media attribute. See this W3Schools page for details.


Make sure that your CSS and HTM/HTML files use the same encoding !

If your HTM/HTML files are encoded as UNICODE, your stylesheet has to be as well.

IE and Edge are not fussy : stylesheets are rendered regardless of the encodings. But Chrome is totally intolerant of unmatched encodings.

I tried every solution/suggestion i could find all over the Internet before i noticed, in my text editor, that i was using different encodings. Once I saved the stylesheets with the same encoding used for the web pages, the problem disappeared.


In Google Chrome

>> goto settings
>> search for cache
>> clear browsing data
>> check cached images and files (the past hour / day)
>> clear browsing data

and goto your webpage and press "Ctrl + r"

Hope this solves your issue Cheers.