[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

@@ -8,31 +8,34 @@
 	<title>Branch Metrics Web SDK Example App</title>
 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 	<style type="text/css">
-		.lineBreak {
-			opacity: 0.5;
-			background-color: lightgray;
+		.split-container {
+			display: flex;
+			align-items: stretch;
+			justify-content: center;
+			width: 90%;
+			margin: auto;
 		}
 
-		.horizontalLine {
-			height: 0.5px;
-			width: 100%;
+		.container {
+			width: 45%;
+			margin: 10px;
+			padding: 15px;
+			background: #fff;
+			border-radius: 5px;
+			box-sizing: border-box;
 		}
 
 		.verticalLine {
 			width: 0.5px;
+			background-color: lightgray;
 		}
 
-		body {
-			font-family: Arial, sans-serif;
-			background-color: #f4f4f9;
-			color: #333;
+		.api-info {
+			order: 1;
 		}
 
-		label {
-			display: block;
-			font-size: 14px;
-			margin-bottom: 6px;
-			font-weight: bold;
+		.api-methods {
+			order: -1;
 		}
 
 		.apiInput {
@@ -47,20 +50,27 @@
 			transition: border-color 0.3s ease, box-shadow 0.3s ease;
 		}
 
-		input:focus {
-			border-color: #007bff;
-			box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
-		}
+		@media (max-width: 768px) {
+			.split-container {
+				flex-direction: column;
+			}
 
-		.row {
-			margin-bottom: 30px;
-		}
+			.container {
+				width: 100%;
+				margin: 10px 0;
+			}
 
-		#configButtons {
-			display: flex;
-			flex-wrap: wrap;
-			gap: 3px;
-			margin-bottom: 10px;
+			.verticalLine {
+				display: none;
+			}
+
+			.api-info {
+				order: -1;
+			}
+
+			.api-methods {
+				order: 1;
+			}
 		}
 
 	</style>
@@ -189,42 +199,69 @@
 	<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-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 class="lineBreak verticalLine"></div>
+
+			<div class="container api-methods">
+				<section>
+					<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 +278,7 @@ <h3>Api Settings</h3>
 					</div>
 				</section>
 			</div>
-			<div class="lineBreak verticalLine"></div>
-			<div class="container">
-				<section>
-					<div class="row col-lg-8 col-lg-offset-2">
-						<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>