Updates

src/App.css

@@ -5,17 +5,11 @@
 .rainfall-gauge {
   border: .01em solid black;
   padding: .6em;
-  width: 15em;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
+@media (max-width: 400px) {
+  .sesnors {
+    display: block;
   }
 }
 
@@ -27,15 +21,13 @@
   padding: .5em;
 }
 
-.App-link {
-  color: #61dafb;
+.sensors {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-content: space-between;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.sensor-col {
+  flex: 1;
 }

src/App.tsx

@@ -8,7 +8,9 @@ function App() {
     <div className="App">
       <h1 className={'header'}>MooreForge Weather Station</h1>
       <p>Welcome to the MooreForge Weather Station. While a work in progress, there are some functional sensors shown below.</p>
-      <div className={'rainfall-gauge'}><Rainfall /></div>
+      <div className={'sensors'}>
+        <div className={'rainfall-gauge sensor-col'}><Rainfall /></div>
+      </div>
     </div>
   );
 }