Fixed the styles for mobile

static/css/style.css

@@ -59,7 +59,7 @@ input[type='submit'] {
 	background-color:#002900;
 	height:60px;
 	width:100vw;
-	z-index:99;
+	z-index: 999;
 }
 
 .main-nav {
@@ -72,7 +72,7 @@ input[type='submit'] {
 	max-width: 1100px;
 	margin:auto;
 	padding:12px 0;
-	z-index:99;
+	z-index: 999;
 }
 
 .main-nav h1 {
@@ -83,6 +83,7 @@ input[type='submit'] {
 	padding:10px;
 	width:200px;
 	font-size:30px;
+	position: static;
 }
 
 .main-nav h1 a:link, .main-nav h1 a:visited, .main-nav h1 a:hover, .main-nav h1 a:active {
@@ -93,6 +94,7 @@ input[type='submit'] {
 #menu-container {
 	overflow-x: hidden;
 	display: inline;
+	position: static;
 }
 
 .main-nav ul {
@@ -165,20 +167,20 @@ input[type='submit'] {
     background-size: cover;
     background-attachment: fixed;
 }
-
+.mobile-bg {
+	display: none;
+}
 .content {
 	width:90%;
 	max-width:1100px;
 	margin:auto;
 }
-
 .content h1, .content h2 {
 	color:#fff;
 	text-align:left;
 	padding: 5px;
 	border-bottom: 1px solid #fff;
 }
-
 .flash {
 	width: 80%;
 	background-color: rgb(175, 255, 175);
@@ -189,7 +191,6 @@ input[type='submit'] {
 	padding: 10px;
 	margin: 20px auto 0px;
 }
-
 #changing-text {
   position: absolute;
   top: 50%;
@@ -198,7 +199,9 @@ input[type='submit'] {
   left: 0;
   right: 0;
 }
-
+.section-bg {
+	display: none;
+}
 .section {
 	border-radius: 40px;
 	border: 2px solid #fff;
@@ -220,43 +223,35 @@ input[type='submit'] {
 	margin: 5px 20px 15px;
 	padding: 0 20px;
 }
-
 .blog-entry:last-of-type {
 	margin-bottom: 5px;
 }
-
 .blog-entry h3, .blog-entry h5, .blog-entry p {
 	margin: 5px 0;
 }
-
 .blog-entry h5 {
 	font-style: italic;
 }
-
 .one-half {
   width: 45%;
   margin: 0 2.5%;
   float: left;
 }
-
 .one-third {
 	width: 30%;
 	margin: 5px 1.5%;
 	float: left;
 	text-align: center;
 }
-
 h1.entry-title {
 	padding: 5px;
 	border-bottom: 1px solid black;
 	text-align: left;
 }
-
 a.view-more {
 	display: block;
 	float: right;
 }
-
 #home {
 	color:white;
 }
@@ -268,11 +263,9 @@ a.insta-link {
     width: 155px;
     margin: auto;
 }
-
 a.insta-link img {
 	border-radius:  50%;
 }
-
 a.insta-link span {
 	border-radius: 50%;
 	color: #fff;
@@ -281,11 +274,9 @@ a.insta-link span {
 	-webkit-transition:opacity 0.25s linear;
 	transition:opacity 0.25s linear;
 }
-
 a.insta-link:hover span {
 	opacity: 1;
 }
-
 span.insta-caption-bg {
 	background-color: rgba(0, 0, 0, 0.75);
 	top: 0;
@@ -296,7 +287,6 @@ span.insta-caption-bg {
 	right: 0;
 	margin: 10px;
 }
-
 span.insta-caption {
 	text-align: center;
 	position: absolute;
@@ -512,6 +502,10 @@ a.social-link:hover, a.social-link:active {
 }
 
 @media screen and (max-width:1024px) {
+	* {
+		z-index: 99;
+		position: relative;
+	}
 	.main-nav, #nav {
 		position: absolute;
 	}
@@ -575,6 +569,45 @@ a.social-link:hover, a.social-link:active {
 	.social-link {
 		font-size: 30px;
 	}
+	.container, .section {
+		background-image: none;
+	}
+	.mobile-bg {
+		display: block;
+		position: fixed;
+		z-index: 0;
+		height: 100%;
+		top: 0;
+		width: 100%;
+		overflow: hidden;
+	}
+	.mobile-bg img {
+		position: absolute;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+	}
+	.section-bg {
+		display: block;
+	    position: absolute;
+	    top: 0;
+	    left: 0;
+	    right: 0;
+	    bottom: 0;
+	    border-radius: 40px;
+	}
+	.section-wrapper {
+	    overflow: hidden;
+	    position: relative;
+	}
+	.section-bg img {
+	    position: fixed;
+	    top: 0;
+	    left: 0;
+	    right: 0;
+	    bottom: 0;
+	}
 }
 
 @media all and (max-width: 768px) {

templates/home.html

@@ -3,8 +3,11 @@
 <h1 style="border-width: 0px; text-align: center; min-height: 120px; position: relative; overflow: hidden;">
     <span id="changing-text">web developer.</span>
 </h1>
-
+<div class="section-wrapper">
     <div class="section" id="blog">
+        <div class="section-bg">
+            <img src="{{ url_for('static', filename='img/bg-blur.jpg') }}">
+        </div>
         <h2 style="margin-top: 0;">from my blog</h2>
         {% for entry in entries %}
             <div class="blog-entry">
@@ -17,7 +20,12 @@
         {% endfor %}
         <a class="view-more" href="{{ url_for('blog') }}">Read more &raquo;</a>
     </div>
+</div>
+<div class="section-wrapper">
     <div class="section" id="projects">
+        <div class="section-bg">
+            <img src="{{ url_for('static', filename='img/bg-blur.jpg') }}">
+        </div>
         <h2>projects</h2>
         <div class="one-third">
             <a href="http://wbrawner.com/interval-timer" target="_blank"><img class="project-logo" style="max-width: 102px; border-radius: 50%;" src="{{ url_for('static', filename='img/interval-timer.png')  }}"></a>
@@ -65,7 +73,12 @@
         </div>
         <a class="view-more" href="{{ url_for('projects') }}">See more &raquo;</a>
     </div>
+</div>
+<div class="section-wrapper">
     <div class="section" id="bio">
+        <div class="section-bg">
+            <img src="{{ url_for('static', filename='img/bg-blur.jpg') }}">
+        </div>
         <h2>quick facts</h2>
         <table>
           <tbody>
@@ -128,4 +141,5 @@
         </table>
         <a class="view-more" href="{{ url_for('bio') }}">Learn more &raquo;</a>
     </div>
+</div>
 {% endblock %}

templates/master.html

@@ -57,6 +57,9 @@
         </div>
 	    </nav>
         <div class="container">
+            <div class="mobile-bg">
+              <img src="{{ url_for('static', filename='img/bg.jpg') }}">
+            </div>
             <div class="content">
             {% for message in get_flashed_messages() %}
                 <div class=flash>{{ message  }}</div>