local forecast as html

server/styles/scss/_current-weather.scss

@@ -1,7 +1,7 @@
 @use 'colors'as c;
 @use 'utils'as u;
 
-#current-weather-html.weather-display {
+.weather-display .current-weather {
 	.main {
 
 		.col {

server/styles/scss/_hourly.scss

@@ -1,7 +1,7 @@
 @use 'colors'as c;
 @use 'utils'as u;
 
-#hourly-html.weather-display {
+.weather-display .hourly {
 	.main {
 		overflow-y: hidden;
 

server/styles/scss/_local-forecast.scss

@@ -0,0 +1,26 @@
+@use 'colors'as c;
+@use 'utils'as u;
+
+.weather-display .local-forecast {
+	.container {
+		position: relative;
+		top: 15px;
+		margin: 0px 10px;
+		box-sizing: border-box;
+		height: 280px;
+		overflow: hidden;
+	}
+
+	.forecasts {
+		position: relative;
+	}
+
+	.forecast {
+		font-family: 'Star4000';
+		font-size: 24pt;
+		text-transform: uppercase;
+		@include u.text-shadow();
+		min-height: 280px;
+		line-height: 40px;
+	}
+}

server/styles/scss/_weatherdisplay.scss

@@ -7,10 +7,12 @@
 	overflow: hidden;
 	position: relative;
 	background-image: url(../images/BackGround1_1.png);
-	display: none;
+
+	/* this method is required to hide blocks so they can be measured while off screen */
+	height: 0px;
 
 	&.show {
-		display: block;
+		height: 480px;
 	}
 
 	.template {

server/styles/scss/compiled.scss

@@ -1,3 +1,4 @@
 @use '_weatherdisplay';
 @use '_hourly';
-@use '_current-weather';
+@use '_current-weather';
+@use '_local-forecast';