Responsive bootstrap template does not display correctly on GH Page, but OK locally

Website does not display correctly on GitHub Pages, https://ajs1592.github.io/Initio/

But original forked theme at https://github.com/pozh/Initio shows up just fine when downloaded and opened locally. I assume something is changing with the sizing that is throwing off the responsiveness.

I suspect I know what is going on …

Your site is served through an HTTPS connection, but your assets are linked via HTTP URLs:

<!-- Bootstrap -->
	<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.no-icons.min.css" rel="stylesheet">
	<!-- Icons -->
	<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
	<!-- Fonts -->
	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Alice|Open+Sans:400,300,700">

This results in most modern browsers refusing to load those assets:

And because most of your page layout is dependent on the Bootstrap and Google Fonts being loaded, your layout gets rendered all wonky :grinning:

All you should have to do is change those URLs I pointed out to HTTPS and things should look much better.

I hope that helps!

1 Like