[other] make websdk example page look decent on mobile

Right now its totally bugged cause we try to split view on a vertical screen. This makes it so that we will just have a vertical scroll on mobile

Author: bredmond5

examples/example.template.html

@@ -20,19 +20,24 @@
 
 		.verticalLine {
 			width: 0.5px;
+			background-color: lightgray;
 		}
 
-		body {
-			font-family: Arial, sans-serif;
-			background-color: #f4f4f9;
-			color: #333;
+		.split-container {
+			display: flex;
+			align-items: stretch;
+			justify-content: center;
+			width: 90%;
+			margin: auto;
 		}
 
-		label {
-			display: block;
-			font-size: 14px;
-			margin-bottom: 6px;
-			font-weight: bold;
+		.container {
+			width: 45%;
+			margin: 10px;
+			padding: 15px;
+			background: #fff;
+			border-radius: 5px;
+			box-sizing: border-box;
 		}
 
 		.apiInput {
@@ -52,8 +57,27 @@
 			box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
 		}
 
-		.row {
-			margin-bottom: 30px;
+		@media (max-width: 768px) {
+			.split-container {
+				flex-direction: column;
+			}
+
+			.container {
+				width: 100%;
+				margin: 10px 0;
+			}
+
+			.verticalLine {
+				display: none;
+			}
+
+			.api-info {
+				order: -1;
+			}
+
+			.api-methods {
+				order: 1;
+			}
 		}
 
 		#configButtons {
@@ -189,13 +213,14 @@
 	<div style="display: flex; flex-direction: column; align-items: center; width: 100%">
 		<h2>Branch Metrics Web SDK Example</h2>
 		<hr class="lineBreak horizontalLine">
-		<div style="display: flex; align-items: stretch; justify-content: center; width: 90%;">
-			<div class="container">
+		<div class="split-container">
+			<div class="container api-methods">
 				<section>
-					<div class="row col-lg-8 col-lg-offset-2">
+					<div class="row">
 						<h3>Methods</h3>
-						<a>https://help.branch.io/developers-hub/docs/web-full-reference</a>
+						<a href="https://help.branch.io/developers-hub/docs/web-full-reference" target="_blank">https://help.branch.io/developers-hub/docs/web-full-reference</a>
 						<hr class="lineBreak horizontalLine">
+
 						<h4>Session</h4>
 						<div class="group">
 							<button class="btn btn-info" onclick="callData()">.data()</button>
@@ -223,12 +248,9 @@ <h4>Tracking</h4>
 							<button class="btn btn-info" onclick="callDisableTracking()">Disable Tracking</button>
 							<button class="btn btn-info" onclick="callEnableTracking()">Enable Tracking</button>
 						</div>
-					</div>
-					<div class="row col-lg-8 col-lg-offset-2">
 						<h3>Api Settings</h3>
 						<hr class="lineBreak horizontalLine">
 						<div class="group" id="configButtons"></div>
-
 						<label id="branchKeyLabel" for="branchKeyInput">Branch Key:</label>
 						<input type="text" id="branchKeyInput" class="apiInput">
 						<br>
@@ -242,9 +264,9 @@ <h3>Api Settings</h3>
 				</section>
 			</div>
 			<div class="lineBreak verticalLine"></div>
-			<div class="container">
+			<div class="container api-info">
 				<section>
-					<div class="row col-lg-8 col-lg-offset-2">
+					<div class="row">
 						<h3>Api Requests</h3>
 						<hr class="lineBreak horizontalLine">
 						<h4>Session Info
@@ -261,7 +283,6 @@ <h4>Response</h4>
 				</section>
 			</div>
 		</div>
-
 	</div>
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>