From a369758edaa7be59637b46903ea12503cbe71126 Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Sat, 31 Jan 2026 21:47:46 +0000
Subject: [PATCH] Improve banner on mobile devices

---
 rmo/template/component/header-rmo.html |  2 +-
 rmo/template/root.html                 |  4 ++--
 scss/rmo/root.scss                     | 19 +++++++++++++------
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/rmo/template/component/header-rmo.html b/rmo/template/component/header-rmo.html
index 912b6bba..dddf7eaf 100644
--- a/rmo/template/component/header-rmo.html
+++ b/rmo/template/component/header-rmo.html
@@ -3,7 +3,7 @@
 	<div class="container">
 		<div class="d-flex align-items-center">
 			<a class="navbar-brand d-flex align-items-center" href="/">
-				<img src="/static/img/rmo/banner.jpg" style="height: 224px;" alt="Report Mosquitoes Online logo"></img>
+				<img class="banner" src="/static/img/rmo/banner.jpg" alt="Report Mosquitoes Online logo"></img>
 			</a>
 		</div>
 	</div>
diff --git a/rmo/template/root.html b/rmo/template/root.html
index 92965eb9..42443681 100644
--- a/rmo/template/root.html
+++ b/rmo/template/root.html
@@ -7,9 +7,9 @@
 <!-- Main Content -->
 <main>
 	<!-- Introduction Section -->
-	<section class="py-5 bg-primary text-white">
+	<section class="py-2 bg-primary text-white">
 		<div class="banner-container d-flex justify-content-center">
-			<img class="banner-image" src="/static/img/rmo/banner.jpg"/>
+			<img class="banner" src="/static/img/rmo/banner.jpg"/>
 		</div>
 	</section>
 
diff --git a/scss/rmo/root.scss b/scss/rmo/root.scss
index 5606b41a..d774dbbe 100644
--- a/scss/rmo/root.scss
+++ b/scss/rmo/root.scss
@@ -1,3 +1,16 @@
+.banner {
+	display: block;
+}
+@include media-breakpoint-up(xs) {
+  .banner {
+    width: 100%;
+  }
+}
+@include media-breakpoint-up(xl) {
+  .banner {
+    height: 100%;
+  }
+}
 .service-card {
 	transition: transform 0.3s;
 	height: 100%;
@@ -24,9 +37,3 @@
   background-color: #F76436;
   overflow: hidden;
 }
-
-.banner-image {
-  display: block;
-  /* width as needed */
-}
-