Form not visible on mobiles - html

Question

html, body {
-webkit-font-smoothing: antialiased;
height: 100%;
/* The html and body elements cannot have any padding or margin. */
font-family: 'Open Sans', sans-serif;
background-color: #f4f5f6;
}
h1 {
font-weight: 700;
}
h2 {
letter-spacing: -1px;
font-weight: 300;
margin-top: 0;
}
h3 {
letter-spacing: -1px;
font-weight: 100;
margin-top: 0;
font-size: 4em;
}
iframe{
width: 100%;
border: 0;
}
/*#features,#support,#testimonials,#news, #bottom{background-color: #f4f5f6;}*/
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto!important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -60px;
color: #333;
}
/* Set the fixed height of the footer here */
#push {
height: 60px;
}
/*Navbar Customizations*/
.navbar-purity {
background: #2D3538;
background-color: #2D3538;
filter: none;
background-image: none;
border: none;
box-shadow: none;
-webkit-box-shadow: none;
-mox-box-shadow: none;
-webkit-transition: background .3s ease;
-moz-transition: background .3s ease;
-o-transition: background .3s ease;
-ms-transition: background .3s ease;
transition: background .3s ease;
}
.navbar-purity {
background: rgba(46, 46, 46, 0.35);
border: none;
}
.navbar-purity .navbar-brand {
padding: 10px 5px;
}
.navbar-purity .navbar-toggle{
border-color: transparent;
}
.navbar-purity .navbar-toggle {
border-color: transparent;
}
.navbar-purity .navbar-toggle:hover,
.navbar-purity .navbar-toggle:focus {
background-color: #333;
}
.navbar-purity .navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-purity.sticky {
background: rgba(0, 0, 0, 0.7);
border-bottom: none;
}
.navbar-purity.sticky .nav > li > a:hover {
color: #fff;
background: none;
box-shadow: none;
-webkit-box-shadow: none;
-mox-box-shadow: none;
}
.navbar-purity.sticky .nav > li.active a {
background: transparent;
color: #fff;
box-shadow: none;
-webkit-box-shadow: none;
-mox-box-shadow: none;
}
.navbar-purity.sticky .nav > li a {
background: transparent;
color: #b4b4b4;
box-shadow: none;
-webkit-box-shadow: none;
-mox-box-shadow: none;
}
.navbar-purity.sticky .dropdown-menu li >a {
display: block;
clear: both;
font-weight: 400;
line-height: 20px;
white-space: nowrap;
}
.navbar-purity .sticky .dropdown-menu li > a:hover, .navbar-purity .sticky .dropdown-menu li > a:focus, .navbar-purity .sticky .dropdown-submenu:hover > a {
text-decoration: none;
color: #FFF;
background-color: #292929;
background-image: none;
}
.navbar-purity .dropdown-menu li > a:hover, .navbar .dropdown-menu li > a:focus, .navbar .dropdown-submenu:hover > a {
text-decoration: none;
color: #FFF;
background-color: #292929;
background-image: none;
}
.navbar .nav > li > .dropdown-menu:after {
border-bottom: 6px solid #383838;
}
.dropdown-menu {
margin: 5px 0 0;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
background-color: #383838;
padding: 0;
border: 0;
;
}
.dropdown-menu li > a {
color: #a5a5a5;
padding: 10px;
border-bottom: 1px solid #474747;
}
.navbar-fixed-top .navbar-inner, .navbar-static-top .navbar-inner {
box-shadow: none;
-webkit-box-shadow: none;
-mox-box-shadow: none;
}
.navbar .nav > li > a {
text-shadow: none;
color: #d3d3d3;
font-size: 15px;
font-weight: 700;
text-decoration: none;
vertical-align: middle;
font-size: 15px!important;
padding: 18px;
-webkit-box-align: center;
-moz-box-align: center;
-o-box-align: center;
box-align: center;
-webkit-transition: color .3s ease;
-moz-transition: color .3s ease;
-o-transition: color .3s ease;
-ms-transition: color .3s ease;
transition: color .3s ease;
}
.navbar .nav > li > a:hover {
color: #999;
background: rgba(0, 0, 0, 0.36);
box-shadow: none;
-webkit-box-shadow: none;
-mox-box-shadow: none;
}
.navbar .nav > li.active a {
background: rgba(0, 0, 0, 0.36);
color: #999;
box-shadow: none;
-webkit-box-shadow: none;
-mox-box-shadow: none;
}
.navbar .nav > li.active a:hover {
background: rgba(0, 0, 0, 0.36);
color: #C6D0D3;
box-shadow: none;
-webkit-box-shadow: none;
-mox-box-shadow: none;
}
/* Nav bar CSS END*/
/*General Items CSS*/
#main-media {
padding-bottom: 10px;
}
section {
position: relative;
}
header {
background: url(../images/header2.jpg) no-repeat fixed #020202;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.btn-landing {
text-shadow: 0 -1px 0 #6c9a15;
color: #fff;
background-color: #8AB833;
background-image: 0;
background-image: 0;
background-image: 0 to(#6c9a15));
background-image: 0;
background-image: 0;
background-image: linear-gradient(top, #a8d651, #6c9a15);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a8d651', endColorstr='#6c9a15', GradientType=0);
border-color: #8AB833 #6c9a15 #6c9a15 #8AB833;
border-color: rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.25);
}
.btn-landing:hover, .btn-landing:active, .btn-landing.active, .btn-landing.disabled, .btn-landing[disabled] {
background-color: #6c9a15;
}
.btn-landing:hover {
color: #fffffb;
text-shadow: 0 -1px 0 #4e7c00;
}
.btn-landing:focus {
color: #eeff97;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
border-color: #8AB833 #6c9a15 #6c9a15 #8AB833;
border-color: rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.25);
}
.btn-landing.active, .btn-landing:active {
background-image: none;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
color: #eeff97;
}
.btn-landing {
font-family: Open Sans, sans-serif;
min-width: 200px;
padding: 20px;
font-size: 19px!important;
font-weight: 300;
background: #8AB833;
border-radius: 0;
When I view my page on a pc or tablet the sign up form is visible but if I view it on a mobile the form is not displayed? This has been driving me nuts for the last 4 hours and I can't seem to find the solution!
Here is my source
<!--################ HEADER START ################-->
<header id="top" data-stellar-background-ratio="0">
<div class="container home">
<div class="flexslider home">
<ul class="slides">
<li class="margintop10p">
<h1>Set Your Course For The Life You <span style="color: #f4f400"> Always Wanted</span></h1>
</li>
</ul>
</div>
<div class="col-md-12">
<div class="subscribe">
<center>
<h2 class="info-text">Sign Up For Your FREE Introductory Session.</h2>
<h4 class="info-text"> <span style="color: #FFFFFF">Discover the power of the subconscious and how to use it to live a life that you love!</span></h4>
<div class="row">
<form class="form-inline" class="infusion-form" accept-charset="UTF-8" action="https://zi258.infusionsoft.com/app/form/process/2ae00069f47efab206dbbafa757ff586" method="POST" target="_blank">
<input name="inf_form_xid" type="hidden" value="2ae00069f47efab206dbbafa757ff586" />
<input name="inf_form_name" type="hidden" value="Free Session Sign Up" />
<input name="infusionsoft_version" type="hidden" value="1.45.0.48" />
<div class="form-group">
<label class="sr-only" for="inf_field_FirstName">First Name</label>
<input class="form-control" class="infusion-field-input-container" id="inf_field_FirstName" name="inf_field_FirstName" type="text" placeholder="Enter first name" />
</div>
<div class="form-group">
<label class="sr-only" for="inf_field_Email">Email</label>
<input class="form-control" class="infusion-field-input-container" id="inf_field_Email" name="inf_field_Email" type="email" placeholder="Enter email"/>
<input class="btn btn-success btn-fill" type="submit" value="Sign Up" target="_blank"/>
</div>
</form>
</div>
</center>
</div>
</div>
<div class="social-header hidden-phone">
</div>
</div>
<div id="home-arrow" class="hidden-phone">
<i class="icon-double-angle-down icon-3x" id="iconHome"></i>
</div>
</header>
<!--################ HEADER END ################-->

Answer 1

It's hard to tell, but I believe it's due to your fixed height header#top.
I inspected the form to get it up in the inspection panel, then I used the chrome device emulator and selected 'Samsung Galaxy S III'. When I went into this new view, the form wasn't there. As I already selected the element, the DOM highlight showed that it was below the next content. I tried using position:absolute; z-index:10; and surely enough it was just in the wrong position. To fix this I went through all the element's ancestors and discovered it was header#top's height:...px (sorry I only just realised this value is generated from screen height at run time so won't be there in your file...). Removing this fixes the problem - I think. Hard to tell without testing it for real - after all, I only emulated.
So to fix it, try adding this to header{...}
height: auto!important;
min-height: 100vh;