Further updated sizing of blocks

Further updated sizing of calculator blocks. Now they will fill any screen size perfectly. NOTE: Works well for everything but mobile landscape. Still need a solution to it.

css/appstyling-v2.css

@@ -1,7 +1,7 @@
 /*
 * What are you lifting V1
 * Copyright 2018, stevenhaskell
-* 12/29/2014
+* 10/10/2018
 */
 
 
@@ -22,6 +22,10 @@
 - Media Queries
 */
 
+p {
+	margin-bottom: 0px;
+	margin-top: 0px;
+}
 
 h2 {
 	font-family: Roboto;
@@ -34,12 +38,13 @@ h2 {
 
 
 .b-header{
-	height: 18vh;
+	height: 24vh;
 	background-color: #48484A;
-	padding: 24px 16px;
 	text-align: center;
 	color: #FFFFFF;
 	position: relative;
+	box-shadow: 0 3px 6px 0 rgba(0,0,0,0.23), 0 3px 6px 0 rgba(0,0,0,0.16);
+	z-index: 1000;
 }
 
 .b-header__heading{
@@ -49,6 +54,7 @@ h2 {
 	font-weight: 400;
 	line-height: 48px;
 	letter-spacing: .025em;
+	margin: 0px;
 }
 
 .b-header__container {
@@ -71,12 +77,12 @@ p.subheading {
 }
 
 .b-platevisual{
-	height: 28vh;
+	height: 36vh;
 	background-color: #FFFFFF;
-	padding: 24px 16px;
 	text-align: center;
 	color: #48484A;
 	position: relative;
+	z-index: 100;
 }
 
 
@@ -107,21 +113,25 @@ p.subheading {
 }
 
 .b-calulatorinputs {
-	height: 28vh;
+	height: 40vh;
 	width: auto;
 	background-color: #8C8E90;
 	text-align: left;
 	color: #FFFFFF;
 	position: relative;
+	box-shadow: 0 6px 6px 0 rgba(0,0,0,0.26), 0 10px 20px 0 rgba(0,0,0,0.19);
+	z-index: 500;
 }
 
+
 .b-calulatorinputs__platerequirements{
-	height: auto;
+	height: 50%;
 	text-align: center;
 	background-color: #8C8E90;
 	border-bottom: 16px solid #FF6600;
 	overflow:auto;
-	padding: 0px 10px;
+	box-sizing: border-box;
+	padding-top: 2%
 }
 
 .b-calulatorinputs__inputcontainer{
@@ -133,8 +143,9 @@ p.subheading {
 	line-height: 14px;
 	letter-spacing: 1.5px;
 	height: auto;
-	overflow: auto;
+	overflow: visible;
 	text-align: center;
+	padding-top: 2%
 }
 
 
@@ -151,6 +162,12 @@ p.subheading {
 
 }
 
+.b-calulatorinputs__weightinput{
+	display: inline-block;
+	text-align: center;
+
+}
+
 input.input-weightsneeded{
 	width: 100%;
 	font-family: "Zilla Slab";
@@ -169,12 +186,10 @@ input.input-weightsneeded{
 
 .b-calulatorinputs__infoentry{
 	background-color: #48484A;
-	padding: 8px 10px;
+	height: 50%;
+	position:relative;
 }
 
-.b-calulatorinputs__inputcontainer{
-	text-align: center;
-}
 
 .b-calulatorinputs__infoentry label{
 	text-align: left;
@@ -220,6 +235,24 @@ label {
 	text-align: center;
 }
 
+.b-infoentry__dividerheading{
+	display: block;
+    margin: 16px auto;
+    position: relative;
+	border-bottom: 1px solid #979797;
+	max-width: 288px;
+}
+
+.b-infoentry__heading{
+	background: #48484A;
+    white-space: nowrap;
+    padding: 0 32px;
+    position: absolute;
+    top: 0px;
+    left: 50%;
+    transform: translate(-50%, -100%);
+}
+
 /*
 .b-container {
 

css/main.css

@@ -130,19 +130,19 @@ body {
 
 /* Typography
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
-h1, h2, h3, h4, h5, h6 {
+/* h1, h2, h3, h4, h5, h6 {*/
-  margin-top: 0;
+  /*margin-top: 0;*/
-  margin-bottom: 2rem;
+  /*margin-bottom: 2rem;*/
-  font-weight: 300; }
+ /* font-weight: 300; }
 h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
 h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
 h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
 h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
 h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
 h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
-
+*/
 /* Larger than phablet */
-@media (min-width: 550px) {
+/*@media (min-width: 550px) {
   h1 { font-size: 5.0rem; }
   h2 { font-size: 4.2rem; }
   h3 { font-size: 3.6rem; }
@@ -153,14 +153,13 @@ h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
 
 p {
   margin-top: 0; }
-
+*/
-
 /* Links
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
-a {
+/*a {
   color: #1EAEDB; }
 a:hover {
-  color: #0FA0CE; }
+  color: #0FA0CE; }*/
 
 
 /* Buttons

whatareyouliftingapp-V5.html

@@ -37,7 +37,7 @@
                 <div class="b-platevisual__container">
                     <p class="b-platevisual__weightfinal"><span class="input-element input-final">0</span> LBS</p>
                     <div class="b-platevisual__barbell">
-                        <img src="https://qph.fs.quoracdn.net/main-qimg-377c39d784e8860d4ce6142fba0e09e0-c" style="width: 50%">
+                        <img src="https://qph.fs.quoracdn.net/main-qimg-377c39d784e8860d4ce6142fba0e09e0-c" style="width: 50%;max-width: 300px;">
                     </div>
                     <p class="subheading">Offset: <span class="input-difference">0</span> LBS</p>
                 </div>
@@ -78,12 +78,16 @@
                 <!-- Weight Entry -->
                 <div class="b-calulatorinputs__infoentry">
                     <div class="b-calulatorinputs__inputcontainer">
-                        <div class="b-calulatorinputs__input">
+                        <div class="b-calulatorinputs__weightinput">
                         	<label for="Weight">WEIGHT</label>
                         	<input type="text" class="b-infoentry__input input-element input-weight" name="Weight" placeholder="What are you lifting? (LBS)" id="Weight">
                         	<input type="button" class="b-infoentry__button submit-element input-calculate" name="Calculate" value="LIFT" onclick="startcalc()">
                         </div>
-                    	<a href="#options"><h2 class="b-infoentry__heading">Options</h2></a>
+                    	<a href="#options">
+                            <div class="b-infoentry__dividerheading">
+                                <h2 class="b-infoentry__heading">Options</h2>
+                            </div>
+                        </a>
                     </div>
                 </div>
             </div>