Updated Weight difference show, and positioning of inputs

Offset only shows when it is needed. Inputs are now perfectly centered no matter the screen size.

css/appstyling-v2.css

@@ -95,6 +95,7 @@ p.subheading {
 
 .b-platevisual__container{
 	width: 80%;
+	min-height: 88px;
 	margin: 0;
   	position: absolute;
   	top: 50%;
@@ -110,6 +111,10 @@ p.subheading {
 
 }
 
+.b-platevisual__weightfinalcontainer{
+	min-height: 28px
+}
+
 .b-platevisual__weightfinal{
 	color: #48484A;
 	font-family: Roboto;
@@ -160,6 +165,9 @@ p.subheading {
 	vertical-align: middle;
 }
 
+.b-platevisual__weightdifferencecontainer{
+	min-height: 28px;
+}
 
 .b-platevisual__weightdifference{
 	display: none;
@@ -183,7 +191,31 @@ p.subheading {
 	background-color: #8C8E90;
 	border-bottom: 16px solid #FF6600;
 	box-sizing: border-box;
-	padding-top: 2%
+	-webkit-transform-style: preserve-3d;
+  	-moz-transform-style: preserve-3d;
+  	transform-style: preserve-3d;
+}
+
+.b-calulatorinputs__platerequirementscontainer{
+	position: relative;
+  	top: 50%;
+  	transform: translateY(-50%);
+}
+
+.b-calulatorinputs__inputcontainer--weight{
+	position: relative;
+  	top: 45%;
+  	transform: translateY(-50%);
+  	width: 100%;
+	color: #FCFCFC;
+	font-family: Roboto;
+	font-size: 10px;
+	font-weight: 500;
+	line-height: 14px;
+	letter-spacing: 1.5px;
+	height: auto;
+	overflow: visible;
+	text-align: center;
 }
 
 .b-calulatorinputs__inputcontainer{
@@ -197,7 +229,8 @@ p.subheading {
 	height: auto;
 	overflow: visible;
 	text-align: center;
-	padding-top: 2%
+	padding-top: 4px;
+
 }
 
 

index.html

@@ -41,7 +41,9 @@
             <!-- Plate Visuals -->
             <div class="b-platevisual">
                 <div class="b-platevisual__container">
+                    <div class="b-platevisual__weightfinalcontainer">
                         <p class="b-platevisual__weightfinal"><span class="input-element input-final">0</span> LBS</p>
+                    </div>
                     <div class="b-platevisual__weight">
                         <img src="images/BarBell.svg" class="b-platevisual__barbell">
                         <div class="b-platevisual__plates b-platevisual__plates--left">
@@ -49,13 +51,16 @@
                         <div class="b-platevisual__plates b-platevisual__plates--right">
                         </div>
                     </div>
+                    <div class="b-platevisual__weightdifferencecontainer">
                         <p class="b-platevisual__weightdifference subheading">Offset: <span class="input-difference">0</span> LBS</p>
                     </div>
                 </div>
+            </div>
 
             <div class="b-calulatorinputs">
                 <!-- Plate Requirements -->
                 <div class="b-calulatorinputs__platerequirements">
+                    <div class="b-calulatorinputs__platerequirementscontainer">
                     	<p class="b-calulatorinputs__subheading subheading">Plates Needed on Each Side</p>
                         <div class="b-calulatorinputs__inputcontainer">
                             <div class="b-calulatorinputs__input">
@@ -84,10 +89,11 @@
                             </div>
                         </div>
                     </div>
+                </div>
 
                 <!-- Weight Entry -->
                 <div class="b-calulatorinputs__infoentry">
-                    <div class="b-calulatorinputs__inputcontainer">
+                    <div class="b-calulatorinputs__inputcontainer--weight">
                         <div class="b-calulatorinputs__weightinput">
 	                        <div class="b-calulatorinputs__weightinputcontainer">
 	                        	<label for="Weight">WEIGHT (LBS)</label>

js/Weight Calculation Script-Edited-Jquery-V4.js

@@ -89,7 +89,6 @@
                     
                     //itterates through plates being added and saves html to string
                     for(var x = 0; x < weightToAdd; x++){
-                      //instead of putting in a string and updating all at once. append the weights each time. Make function and append and then animate. Replace this block.
                       var platename = plateWeights[i];
                       if (platename == 2.5) {
                         platename = '2half';
@@ -107,7 +106,6 @@
             }
         }
         //replaces and animates html for plates required to bar.
-        //if statment works but need to figureout how to step animation.
         if (jQuery('.b-platevisual__plate').length > 0) {
             //animates plates off
             animatePlatesOut();
@@ -153,7 +151,12 @@
 
     //show reset button on calculate
     jQuery(".input-calculate").click(function(){
-        jQuery(".b-infoentry__reset, .b-platevisual__weightfinal, .b-platevisual__weightdifference").show();
+        jQuery(".b-infoentry__reset, .b-platevisual__weightfinal").show();
+        if (jQuery(".b-platevisual__weightdifference").text() != "Offset: 0 LBS") {
+            jQuery(".b-platevisual__weightdifference").show();
+        } else {
+            jQuery(".b-platevisual__weightdifference").hide();
+        }
     });
 
     //hide reset button on weight input