Github pages css troubles only on smartphone - html

Question

I am creating a website using Jekyll, and publishing it using Github pages. When I jekyll serve the website in local, everything works fine, and it looks normal both from my computer and smartphone. But when I visit the Github pages one from my smartphone, some divs seem to be shifted a bit, and the font-awesome icons are not rendered. Strangely, it works fine when I visit it (the Github pages one) from my computer.
I am not sure where to look at. Could something happen on github and be overriding only some media queries?
I have no idea yet what is relevant in the code, but I'll try to create some MCV example. Until then, the source code is here and the website is here.
Here's the CSS, mostly taken from a Pure css layout:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*
* -- BASE STYLES --
* Most of these are inherited from Base, but I want to change a few.
*/
body {
line-height: 1.7em;
color: #7f8c8d;
font-size: 13px;
}
h1,
h2,
h3,
h4,
h5,
h6,
label {
color: #34495e;
}
div.tweet-box {
font-size: 20px;
font-weight: bold;
border-left: 3px solid #1f8dd6;
padding: 1em 1.6em;
font-weight: 100;
border-radius: 5px;
line-height: 1em;
}
.fat {
font-weight: bold;
}
a.shy-link {
text-decoration: none;
color: #7f8c8d;
}
a:visited.shy-link{
text-decoration: none;
color: #7f8c8d;
}
a:hover.shy-link{
text-decoration: none;
color: #34495e;
}
.pure-img-responsive {
max-width: 100%;
height: auto;
}
/*
* -- LAYOUT STYLES --
* These are some useful classes which I will need
*/
.l-box {
padding: 0.4em;
}
.l-box-lrg {
padding: 2em;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.is-center {
text-align: center;
}
/*
* -- PURE FORM STYLES --
* Style the form inputs and labels
*/
.pure-form label {
margin: 1em 0 0;
font-weight: bold;
font-size: 100%;
}
.pure-form input[type] {
border: 2px solid #ddd;
box-shadow: none;
font-size: 100%;
width: 100%;
margin-bottom: 1em;
}
/*
* -- PURE BUTTON STYLES --
* I want my pure-button elements to look a little different
*/
.pure-button {
background-color: #1f8dd6;
color: white;
padding: 0.5em 2em;
border-radius: 5px;
}
a.pure-button-primary {
background: white;
color: #1f8dd6;
border-radius: 5px;
font-size: 120%;
}
/*
* -- MENU STYLES --
* I want to customize how my .pure-menu looks at the top of the page
*/
.home-menu {
padding: 0.5em;
text-align: center;
box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
}
.home-menu {
background: #2d3e50;
}
.pure-menu.pure-menu-fixed {
/* Fixed menus normally have a border at the bottom. */
border-bottom: none;
/* I need a higher z-index here because of the scroll-over effect. */
z-index: 4;
}
.home-menu .pure-menu-heading {
color: white;
font-weight: 400;
font-size: 120%;
}
.home-menu .pure-menu-selected a {
color: white;
}
.home-menu a {
color: #6FBEF3;
}
.home-menu li a:hover,
.home-menu li a:focus {
background: none;
border: none;
color: #AECFE5;
}
/*
* -- SPLASH STYLES --
* This is the blue top section that appears on the page.
*/
.splash-container {
background: #1f8dd6;
z-index: 1;
overflow: hidden;
/* The following styles are required for the "scroll-over" effect */
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed !important;
}
.splash {
/* absolute center .splash within .splash-container */
width: 80%;
height: 50%;
margin: auto;
position: absolute;
top: 100px; left: 0; bottom: 0; right: 0;
text-align: center;
text-transform: uppercase;
}
/* This is the main heading that appears on the blue section */
.splash-head {
font-size: 20px;
font-weight: bold;
color: white;
border: 3px solid white;
padding: 1em 1.6em;
font-weight: 100;
border-radius: 5px;
line-height: 1em;
}
/*
* -- CONTENT STYLES --
* This represents the content area (everything below the blue section)
*/
#keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.content-caret img {
display: block;
margin-right: auto;
margin-left: auto;
animation: blink 2s;
animation-iteration-count: infinite;
}
.content-caret img.content-caret-bottom {
animation-delay: 0.1s;
transform: translate(0, -80%);
}
.content-caret img.content-caret-top {
animation-delay: 0s;
}
.content-wrapper {
/* These styles are required for the "scroll-over" effect */
position: absolute;
top: 87%;
width: 100%;
min-height: 12%;
z-index: 2;
background: transparent;
}
.content-wrapper-solid {
background: white;
}
/* This is the class used for the main content headers () */
.content-head {
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.1em;
margin: 2em 0 1em;
/*padding: 10px;*/
}
/* This is a modifier class used when the content-head is inside a ribbon */
.content-head-ribbon {
color: white;
}
/* This is the class used for the content sub-headers () */
.content-subhead {
color: #1f8dd6;
}
.content-subhead i {
margin-right: 7px;
}
/* This is the class used for the dark-background areas. */
.ribbon {
background: #2d3e50;
color: #aaa;
}
/* This is the class used for the footer */
.footer {
background: #111;
font-size: 11px;
}
/*
* -- TABLET (AND UP) MEDIA QUERIES --
* On tablets and other medium-sized devices, we want to customize some
* of the mobile styles.
*/
#media (min-width: 48em) {
/* We increase the body font size */
body {
font-size: 16px;
}
/* We want to give the content area some more padding */
.content {
padding: 1em;
}
/* We can align the menu header to the left, but float the
menu items to the right. */
.home-menu {
text-align: left;
}
.home-menu ul {
float: right;
}
/* We increase the height of the splash-container */
/* .splash-container {
height: 500px;
}*/
/* We decrease the width of the .splash, since we have more width
to work with */
.splash {
width: 50%;
height: 50%;
}
.splash-head {
font-size: 250%;
}
/* We remove the border-separator assigned to .l-box-lrg */
.l-box-lrg {
border: none;
}
}
/*
* -- DESKTOP (AND UP) MEDIA QUERIES --
* On desktops and other large devices, we want to over-ride some
* of the mobile and tablet styles.
*/
#media (min-width: 78em) {
/* We increase the header font size even more */
.splash-head {
font-size: 300%;
}
}
EDIT:
Here are a few pictures to explain what I mean.
From the Android default browser (which doesn't support CSS3 transitions and transforms, it seems): (OK)
From Firefox on Android: (NO HEADER, WEIRD BLUE BAR: NOT OK)
From my desktop's Firefox (resized to match a phone's dimension): (OK)
What's surprising is that it seems to only occur on firefox on Android. I also tried on an iPhone, and the result is as expected. Why that only happens from Github-pages and not from my local server is what startles me the most.
EDIT 2:
I just compared the css produced by Github Pages and the css produced by my server, and besides a few linebreaks and spaces here and there, they are identical. Could the difference reside in the HTML?

Answer 1

I've just reproduced this on Firefox 38 on Ubuntu.
While trying to find a box-model problem I saw this in my Firefox security console :
Blocked loading mixed active content "http://yui.yahooapis.com/pure/0.6.0/pure-min.css"[Learn More] nicowcow.github.io
Blocked loading mixed active content "http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css"[Learn More] nicowcow.github.io
Blocked loading mixed active content "http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"[Learn More]
Then the problem might be here (see MDN documentation about MixedContent).
So, the solution is to request those three ressources over https.
This does work for Font-awesome at https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css but not for pure files (NET::ERR_CERT_COMMON_NAME_INVALID).
You will have to host them on your server or find another provider which serve over htpps.