Github pages not loading W3.CSS?

Question

I am trying to create a github page using the css stylesheet from W3.CSS.

However, when I try to load the page, it seems like no CSS stylesheet is loaded. I did not found an answer here on stackoverflow or anywhere else

Maybe I am doing something wrong, but I don't know what.

Here is the beggining of my index.html file

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-black.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif}
.w3-sidenav a,.w3-sidenav h4 {padding: 12px;}
.w3-navbar li a {
    padding-top: 12px;
    padding-bottom: 12px;
}
</style>
<title>Amérique du Sud</title>
</head>

And here is the page in question

Michael Coker · Accepted Answer · 2017-05-06 16:06:14Z

2

If you look in the browser console you'll see an error

Mixed Content: The page at 'https://laurenthayez.github.io/#Argentine' was loaded over HTTPS, but requested an insecure stylesheet 'http://www.w3schools.com/lib/w3.css'. This request has been blocked; the content must be served over HTTPS.

That means that since your site is https://, it will not load resources that are served over http:// for security reasons.

The solution is to use https://www.w3schools.com/... for your assets instead of http://www.w3schools.com/.... Or you can just use //www.w3schools.com/... and that will request the asset from the site using the same protocol as your site. Or in other words, if your website is http://, it will request http://, or if your website is https://, it will request https://

So change your link tags to

<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-black.css">

or

<link rel="stylesheet" href="//www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="//www.w3schools.com/lib/w3-theme-black.css">

answered May 6, 2017 at 16:06

Michael Coker

53.8k5 gold badges69 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Laurent Hayez Over a year ago

Great! Thank you for the explanations and the help :-)

Michael Coker Over a year ago

@LaurentHayez you bet :)

Collectives™ on Stack Overflow

Github pages not loading W3.CSS?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related