[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

@@ -18,21 +18,26 @@
 			width: 100%;
 		}
 
-		.verticalLine {
-			width: 0.5px;
+		.split-container {
+			display: flex;
+			align-items: stretch;
+			justify-content: center;
+			width: 90%;
+			margin: auto;
 		}
 
-		body {
-			font-family: Arial, sans-serif;
-			background-color: #f4f4f9;
-			color: #333;
+		.container {
+			width: 45%;
+			margin: 10px;
+			padding: 15px;
+			background: #fff;
+			border-radius: 5px;
+			box-sizing: border-box;
 		}
 
-		label {
-			display: block;
-			font-size: 14px;
-			margin-bottom: 6px;
-			font-weight: bold;
+		.verticalLine {
+			width: 0.5px;
+			background-color: lightgray;
 		}
 
 		.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,42 +213,45 @@
 	<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>
 							<button class="btn btn-info" onclick="callLogout()">Logout</button>
 							<button class="btn btn-info" onclick="callFirst()">.first()</button>
 						</div>
+
 						<h4>Identity</h4>
 						<div class="group">
 							<input class="example-input" type="text" id="identityID" placeholder="[email protected]">
 							<button id="setIdentity" class="btn btn-info" onclick="callSetIdentity()">Set Identity</button>
 						</div>
+
 						<h4>Events</h4>
 						<div class="group">
 							<button class="btn btn-info" onclick="callLogEvent('PURCHASE')">Create Standard Event</button>
 							<button class="btn btn-info" onclick="callLogEvent('testedCustomEvent')">Create Custom Event</button>
 						</div>
+
 						<h4>Sharing</h4>
 						<div class="group">
 							<button class="btn btn-info" onclick="callLink()">Create Link</button>
 							<button class="btn btn-info" onclick="callQrCode()">Create QrCode</button>
 							<button class="btn btn-info" onclick="callBanner()">.banner()</button>
 						</div>
+
 						<h4>Tracking</h4>
 						<div class="group">
 							<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>
@@ -241,27 +268,31 @@ <h3>Api Settings</h3>
 					</div>
 				</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
 							<button class="btn btn-info" onclick="copySessionInfo()" style="margin-left: 10px; font-size: 12px; padding: 2px 8px; cursor: pointer;">
 								Copy
 							</button>
 						</h4>
 						<pre id="session-info">Reading session from .init()...</pre>
+
 						<h4>Request</h4>
 						<pre id="request">Click a button!</pre>
+
 						<h4>Response</h4>
 						<pre id="response">Click a button!</pre>
 					</div>
 				</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>