The whole width-container div disappears on android browsers. I have tried using a few various methods such as placing it left top details, translate z, but nothing seems to work.
EDIT: Is anyone skilled enough to solve this!?
http://jsfiddle.net/lagmonster/keeLLjw6/5/
html, body, .container {
height: 100%;
padding: 0;
margin: 0;
font-family: "brandon-grotesque",'Josefin Sans', sans-serif;
color: #282828;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
body > .container {
height: auto; min-height: 100%;
background-color: white;
}
#intro {
width: 100%;
height: 100%;
float: left;
position: relative;
overflow: hidden;
background: url(../images/work/sky_mob.jpg) no-repeat;
background-size: 200%;
}
#footer {
clear: both;
position: relative;
z-index: 10;
height: 200px;
width: 100%;
margin-top: -100px;
background-color: white;
}
#footer a:link{ color:white; }
#footer a:visited{ color:white; }
#footer a:hover{ color:#d4af37; }
#footer a:active{ color:white; }
.footer-half {
clear: both;
position: relative;
z-index: 10;
}
.footer-half-first {
height: 100px;
margin-top: -100px;
background-color: white;
}
.footer-half-second {
height: 100px;
margin-top: 0px;
background-color: #1e1e1e;
}
.footer-contents {
width: 90%;
margin: 0 auto;
padding-top: 22px;
color: white;
font-size: 10px;
}
.feature {
position: relative;
}
.feature a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none; /* No underlines on the link */
z-index: 10; /* Places the link above everything else in the div */
background-color: #FFF; /* Fix to make div clickable in IE */
opacity: 0; /* Fix to make div clickable in IE */
filter: alpha(opacity=1); /* Fix to make div clickable in IE */
}
img {
width: 100%;
}
/* ******************************************** */
/* *************** STICKYHEADER *************** */
#header{
width: 100%;
height:100%;
}
#headertwo{
width: 100%;
height: 48px !important;
background: url(../images/work/topsky.jpg) no-repeat;
background-size: 100%;
}
#header_stick{
width: 100%;
height: 90px;
margin-top: 16px;
font-size: 16px;
background-color: white;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-o-transition: all .25s ease;
-ms-transition: all .25s ease;
transition: all .25s ease;
}
#header_stick img{
margin-top: -7px;
width: 150px;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-o-transition: all .25s ease;
-ms-transition: all .25s ease;
transition: all .25s ease;
}
.stick {
position:fixed;
width: 100%;
top:0;
height: 70px !important;
margin-top: 0px !important;
font-size: 16px !important;
background-color: white !important;
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: #d4af37;
opacity:1;
z-index: 14;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-o-transition: all .25s ease;
-ms-transition: all .25s ease;
transition: all .25s ease;
}
.stick img {
margin-top: -7px!important;
width: 150px !important;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-o-transition: all .25s ease;
-ms-transition: all .25s ease;
transition: all .25s ease;
}
/* ***************************************** */
/* *************** CONTAINER *************** */
.width-container {
position: relative;
width: 90%;
margin: 0 auto;
top: -10px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-webkit-transition: width .5s ease;
-moz-transition: width .5s ease;
-o-transition: width .5s ease;
-ms-transition: width.5s ease;
transition: width .5s ease;
}
/* ****************************************** */
/* *************** NAVIGATION *************** */
.nav-container {
position: relative;
width: 90%;
height: 70px;
margin: 0 auto;
background-color: white;
overflow: hidden;
font-weight: 700;
}
.nav-logo {
float: left;
width: 70%;
height: 100%;
margin-top: 16px;
}
.nav-logo-img {
float: left;
margin-right: 8px;
}
.nav-logo-text {
margin-top: -3px;
margin-left: 0px;
float: left;
}
.nav-menu {
float: left;
position: relative;
width: 30%;
right: 0px;
margin-top: 8px;
height: 30px;
}
.nav-link {
float: left;
position: relative;
margin-right: 0px;
margin-top: 0px;
text-align: left;
color: #404040;
display: none;
}
.work {
left: -80px;
}
.about {
left: 38px;
}
.contact {
left: 172px;
}
.nav-link > a {
text-decoration: none;
color: #404040;
}
.nav-link > a:hover,
.nav-link > a.active {
color: #404040;
}
.nav-link > a:before {
content: "";
float: right;
position: absolute;
width: 100%;
height: 2px;
bottom: -4px;
left: 0;
background-color: #d4af37;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.nav-link > a:hover:before,
.nav-link > a.active:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
button {
float: right;
margin-top: 10px;
margin-right: -7px;
background-size: 100%;
border: none;
outline: none;
font-family: "brandon-grotesque",'Josefin Sans', sans-serif;
font-size: 20px;
font-weight: 700;
color: #282828;
display: visible;
background: rgba(0,0,0,0);
}
#logo {
width: 150px;
height: 150px;
margin: auto;
z-index: 100;
position: absolute;
top: 30%; left: 0; right: 0;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}
video#bgvid {
position: absolute; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -1;
background: url(../images/work/sky2.jpg) no-repeat;
background-size: cover;
overflow: hidden;
display: hidden;
visibility: hidden;
}
video {
display: hidden;
}
.anchor-container {
position: relative;
height: 100%;
}
.anchor-point {
width: 100%;
margin-left: 0px;
position: absolute;
bottom: 48px;
}
/* ************************************ */
/* *************** WORK *************** */
.folio {
float:left;
margin-top: 12px;
z-index: 12;
background-size: 100%;
background-repeat: no-repeat;
background-position: left top;
background-color: black;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}
.folio:hover {
-webkit-transition: background-image .25s ease;
-moz-transition: background-image .25s ease;
-o-transition: background-image .25s ease;
-ms-transition: background-image .25s ease;
transition: background-image .25s ease;
}
/*
.folio:before {
content: "";
display: block;
padding-top: 90%;
}
*/
.square {
}
.bigsquare {
}
.wide {
}
.tall {
}
/* ******************************************* */
/* *************** TILE IMAGES *************** */
.wideone {
display: inline-block;
position:relative;
text-indent: -0px;
width: 100%;
height: 100%;
background: url(../images/work/HiRes/Sprite_wide.jpg) no-repeat top center;
background-size: 100%;
background-color: blue;
}
.wideone:after {
content: "";
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background: url(../images/work/HiRes/Sprite_wide.jpg) no-repeat;
background-position: bottom center;
background-size: 100%;
z-index: 13;
opacity: 0;
-webkit-transition: opacity .5s ease;
-moz-transition: opacity .5s ease;
-o-transition: opacity .5s ease;
-ms-transition: opacity .5s ease;
transition: opacity .5s ease;
}
.wideone:hover:after {
opacity: 1;
z-index: 13;
}
.supersquare {
display: inline-block;
position:relative;
text-indent: -0px;
width: 100%;
height: 86vw;
background: url(../images/work/HiRes/Sprite_supersquare.jpg) no-repeat top center;
background-size: 100%;
background-color: red;
}
.supersquare:after {
content: "";
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background: url(../images/work/HiRes/Sprite_supersquare.jpg) no-repeat;
background-position: bottom center;
background-size: 100%;
z-index: 13;
opacity: 0;
-webkit-transition: opacity .5s ease;
-moz-transition: opacity .5s ease;
-o-transition: opacity .5s ease;
-ms-transition: opacity .5s ease;
transition: opacity .5s ease;
}
.supersquare:hover:after {
opacity: 1;
z-index: 13;
}
.tallone {
display: inline-block;
position:relative;
text-indent: -0px;
width: 100%;
height: 100%;
background: url(../images/work/HiRes/Sprite_tall.jpg) no-repeat top left;
background-size: 100%;
background-color: green;
}
.tallone:after {
content: "";
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background: url(../images/work/HiRes/Sprite_tall.jpg) no-repeat;
background-position: bottom right;
background-size: 100%;
z-index: 13;
opacity: 0;
-webkit-transition: opacity .5s ease;
-moz-transition: opacity .5s ease;
-o-transition: opacity .5s ease;
-ms-transition: opacity .5s ease;
transition: opacity .5s ease;
}
.tallone:hover:after {
opacity: 1;
z-index: 13;
}
.squareone {
display: inline-block;
position:relative;
text-indent: -0px;
width: 100%;
height: 86vw;
background: url(../images/work/HiRes/Sprite_square.jpg) no-repeat top center;
background-size: 100%;
background-color: yellow;
}
.squareone:after {
content: "";
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background: url(../images/work/HiRes/Sprite_square.jpg) no-repeat;
background-position: bottom center;
background-size: 100%;
z-index: 13;
opacity: 0;
-webkit-transition: opacity .5s ease;
-moz-transition: opacity .5s ease;
-o-transition: opacity .5s ease;
-ms-transition: opacity .5s ease;
transition: opacity .5s ease;
}
.squareone:hover:after {
opacity: 1;
z-index: 13;
}
.talltwo {
display: inline-block;
position:relative;
text-indent: -0px;
width: 100%;
height: 100%;
background: url(../images/work/HiRes/Sprite_tall.jpg) no-repeat top left;
background-size: 100%;
background-color: blue;
}
.talltwo:after {
content: "";
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background: url(../images/work/HiRes/Sprite_tall.jpg) no-repeat;
background-position: bottom right;
background-size: 100%;
z-index: 13;
opacity: 0;
-webkit-transition: opacity .5s ease;
-moz-transition: opacity .5s ease;
-o-transition: opacity .5s ease;
-ms-transition: opacity .5s ease;
transition: opacity .5s ease;
}
.talltwo:hover:after {
opacity: 1;
z-index: 13;
}
.squaretwo {
display: inline-block;
position:relative;
text-indent: -0px;
width: 100%;
height: 100%;
background: url(../images/work/HiRes/Sprite_square.jpg) no-repeat top center;
background-size: 100%;
background-color: green;
}
.squaretwo:after {
content: "";
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background: url(../images/work/HiRes/Sprite_square.jpg) no-repeat;
background-position: bottom center;
background-size: 100%;
z-index: 13;
opacity: 0;
-webkit-transition: opacity .5s ease;
-moz-transition: opacity .5s ease;
-o-transition: opacity .5s ease;
-ms-transition: opacity .5s ease;
transition: opacity .5s ease;
}
.squaretwo:hover:after {
opacity: 1;
z-index: 13;
}
.widetwo {
display: inline-block;
position:relative;
text-indent: -0px;
width: 100%;
height: 100%;
background: url(../images/work/HiRes/Sprite_wide.jpg) no-repeat top center;
background-size: 100%;
background-color: red;
}
.widetwo:after {
content: "";
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background: url(../images/work/HiRes/Sprite_wide.jpg) no-repeat;
background-position: bottom center;
background-size: 100%;
z-index: 13;
opacity: 0;
-webkit-transition: opacity .5s ease;
-moz-transition: opacity .5s ease;
-o-transition: opacity .5s ease;
-ms-transition: opacity .5s ease;
transition: opacity .5s ease;
}
.widetwo:hover:after {
opacity: 1;
z-index: 13;
}
.squarethree {
display: inline-block;
position:relative;
text-indent: -0px;
width: 100%;
height: 100%;
background: url(../images/work/HiRes/Sprite_square.jpg) no-repeat top center;
background-size: 100%;
background-color: yellow;
}
.squarethree:after {
content: "";
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background: url(../images/work/HiRes/Sprite_square.jpg) no-repeat;
background-position: bottom center;
background-size: 100%;
z-index: 13;
opacity: 0;
-webkit-transition: opacity .5s ease;
-moz-transition: opacity .5s ease;
-o-transition: opacity .5s ease;
-ms-transition: opacity .5s ease;
transition: opacity .5s ease;
}
.squarethree:hover:after {
opacity: 1;
z-index: 13;
}
/* ***************************************** */
/* *************** CONTAINER *************** */
.descript-container {
position: relative;
margin-left: 4%;
margin-top: 4%;
height: 100%;
z-index: 14;
}
.descript-top {
width: 100%;
}
.descript-bottom {
width: 100%;
position: absolute;
bottom: 12px;
}
.textbox {
float: left;
}
.client {
float: left;
font-size: 13px;
font-weight: 700;
margin-bottom: 12px;
}
.text-wide {
width: 30%;
top: 0px;
}
.text-small {
width: 30%;
}
.medium {
float: left;
}
.category-wide {
float: right;
width: 64%;
margin-right: 4%;
font-size: 11px;
text-align: right;
margin-bottom: 12px;
}
.category-small {
float: right;
width: 64%;
margin-right: 4%;
font-size: 11px;
margin-bottom: 12px;
text-align: right;
}
.other-wide {
padding-top: 44%;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}
.other-square {
padding-top: 96%;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}
.other-supersquare {
padding-top: 96%;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}
.other-tall {
padding-top: 200%;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}
<div id="header">
<div id="logo"><img src="images/work/icon_logo.png">
</div>
<div id="intro">
<video autoplay loop poster="images/work/sky2.jpg" id="bgvid">
<source src="" type="video/webm">
<source src="video/Peri_CloudLoop_BWTV.mp4" type="video/mp4">
</video>
</div>
<div class="anchor-container">
<a name="anchor"></a>
<div class="anchor-point">
</div>
</div>
</div>
<div id="header_stick">
<div class="nav-container">
<div class="nav-logo feature">
<a href="index.html" class="transition">
</a>
<div class="nav-logo-img"><img src="images/logo.png">
</div>
<div class="nav-logo-text">
Art Direction & Design</div>
</div>
<div class="nav-menu">
<div class="nav-link contact"><a href="contact.html" class="transition">Contact</a>
</div>
<div class="nav-link about"><a href="about.html" class="transition">About</a>
</div>
<div class="nav-link work"><a href="index.html" class="active transition">Work</a>
</div>
<button id="trigger-overlay" type="button">Menu</button>
</div>
</div>
</div>
<div class="overlay overlay-hugeinc">
<button type="button" class="overlay-close">Close</button>
<nav>
<ul>
<li><a href="index.html#anchor" class="transition">Work</a></li>
<li><a href="about.html" class="transition">About</a></li>
<li><a href="contact.html" class="transition">Contact</a></li>
</ul>
</nav>
</div>
<div class="width-container">
<div class="folio wideone feature">
<div class="descript-container">
<a href="wideone.html" class="transition"></a>
<div class="descript-bottom">
<div class="client text-wide">Title
</div>
<div class="category-wide">Subtitle
</div>
</div>
</div>
</div>
<div class="folio supersquare feature">
<div class="descript-container">
<a href="supersquare.html" class="transition"></a>
<div class="descript-bottom">
<div class="client text-wide">Title
</div>
<div class="category-wide">Subtitle
</div>
</div>
<div class="other-supersquare">
</div>
</div>
</div>
<div class="folio tallone feature" >
<div class="descript-container">
<a href="tallone.html" class="transition"></a>
<div class="descript-bottom">
<div class="client text-wide">Title
</div>
<div class="category-small">Subtitle
</div>
</div>
<div class="other-tall">
</div>
</div>
</div>
<div class="folio squareone feature">
<div class="descript-container">
<a href="pedro.html" class="transition"></a>
<div class="descript-bottom">
<div class="client text-small">Title
</div>
<div class="category-small">Subtitle
</div>
</div>
<div class="other-square">
</div>
</div>
</div>
<div class="folio talltwo feature">
<div class="descript-container">
<a href="talltwo.html" class="transition"></a>
<div class="descript-bottom">
<div class="client text-wide">Title
</div>
<div class="category-small">Subtitle
</div>
</div>
<div class="other-tall">
</div>
</div>
</div>
<div class="folio squaretwo feature">
<div class="descript-container">
<a href="squaretwo.html" class="transition"></a>
<div class="descript-bottom">
<div class="client text-small">Title
</div>
<div class="category-small">Subtitle
</div>
</div>
<div class="other-square">
</div>
</div>
</div>
<div class="folio widetwo feature">
<div class="descript-container">
<a href="wired.html" class="transition"></a>
<div class="descript-bottom">
<div class="client text-wide">Title
</div>
<div class="category-wide">Subtitle
</div>
</div>
<div class="other-wide">
</div>
</div>
</div>
<div class="folio squarethree feature">
<div class="descript-container">
<a href="squarethree.html" class="transition"></a>
<div class="descript-bottom">
<div class="client text-small">Title
</div>
<div class="category-small">Subtitle
</div>
</div>
<div class="other-square">
</div>
</div>
</div>
</div>
<div id="footer">
<div class="footer-half footer-half-first">
</div>
<div class="footer-half footer-half-second">
<div class="footer-contents">Made by
</div>
</div>
</div>