Updated

css/style.css

@@ -21,15 +21,20 @@ body {
 	border: 5px solid #009f9f;
 	border-radius: 20px;
 	line-height: 1.5;
-	margin: 0.5rem auto;
+	margin: 1rem auto;
 	min-width: 300px;
 	width: 80%;
 	text-align: center;
 }
 
-.flexi {
+.flexi-temp {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.flexi-sun {
 	display: flex;
-	flex-direction: row;
 	justify-content: space-evenly;
 	margin: 0.25rem auto;
 }
@@ -57,27 +62,24 @@ section .container {
 }
 
 .dspIcon {
-	width: 3.5rem;
+	width: 5.5rem;
 }
 
 #dspWeather {
 	font-size: 1.25rem;
 	font-weight: bold;
+	margin-top: -1rem;
 }
 
 #dspTemp {
-	display: inline-block;
 	font-size: 2.5rem;
-	width: 7rem;
+	flex: 0 0 7rem;
 }
 
 #dspButton {
-	position: relative;
-	display: inline;
 	font-size: 1.25rem;
 	width: 2.25rem;
 	height: 2.25rem;
-	top: -7px;
 }
 
 #dspSunrise,

index.html

@@ -30,9 +30,11 @@ <h1>Weather</h1>
 			<p id="dspLoc">Location...</p>
 			<img class="dspIcon" src="#" alt="weather icon">
 			<p id="dspWeather">Weather condition...</p>
-			<p id="dspTemp"><span id="dspTempValue">0</span>&deg;<span id="dspTempUnit">C</span></p>
-			<button id="dspButton" onclick="convertTemp()" value="degC">&deg;F</button>
-			<div class="flexi">
+			<div class="flexi-temp">
+				<p id="dspTemp"><span id="dspTempValue">0</span>&deg;<span id="dspTempUnit">C</span></p>
+				<button id="dspButton" onclick="convertTemp()" value="degC">&deg;F</button>
+			</div>
+			<div class="flexi-sun">
 				<p id="dspSunrise"><i class="fas">&#xf185;</i> <span id="dspSunriseTime">00:00 AM</span></p>
 				<p id="dspSunset"><i class="far">&#xf185;</i> <span id="dspSunsetTime">00:00 PM</span></p>
 			</div>

js/localweather.js

@@ -60,6 +60,8 @@ async function getWeatherInfo(lat, lon) {
 		displayWeather(loc, icon, weather, temp, sunrise_time, sunset_time, wind);
 
 	} catch (ex) {
+		$('.dspIcon').css({'display': 'none'});
+		$('#dspWeather').css({'margin-top': 'auto'});
 		alert(`An error has occurred.\nPlease try again later.`);
 	}
 }