added styling for mobile and tablet

Author: Hannah Dunsmore

src/Components/RoverDetails/RoverDetails.scss

@@ -9,13 +9,16 @@
   margin: 40px auto;
   font-family: $MartianMono;
   }
+  #scroll-message{
+    display: none;
+  }
 }
 
 #rover-button-container {
     display: flex;
     justify-content: space-between;
     margin: 0 auto;
-    width: 30vw;
+    width: 50vw;
     font-family: $PublicSans;
     button {
         all: unset;
@@ -30,13 +33,95 @@
             margin: 10px 0;
             color: whitesmoke;
         }
-        .selected-rover {
-            span {
-                text-decoration: underline;
-            }
-        } 
     }
+  .selected-rover {
+    span {
+       text-decoration: underline;
+    }
+        } 
     img {
         width: 150px;
     }
 }
+
+// Media Queries
+
+@media(min-width: 1440px) {
+    #rover-button-container {
+        width: 40vw;
+    }
+}
+
+@media(max-width: 898px) {
+    #rover-button-container {
+        width: 65vw;
+    }
+}
+
+@media(max-width: 766px) {
+    #rover-information-container {
+        #rover-header { 
+         margin: 40px auto 15px auto;
+       }
+        #scroll-message{
+            display: block;
+            color: whitesmoke;
+            font-family: $MartianMono;
+            font-size: 12px;
+            text-align: center;
+        }
+    }
+    #rover-button-container {
+        width:20vw;
+    }
+
+    .button-carousel {
+        display: flex;
+        overflow-x: auto;
+        gap: 1rem;
+        padding: 1rem;
+        scroll-snap-type: x mandatory;
+        
+        button {
+            flex: 0 0 auto;
+            scroll-snap-align: start;
+
+        }
+    }
+}
+
+@media(max-width: 425px) {
+
+   #rover-header { 
+      margin: 15px auto;
+  }
+    #rover-button-container {
+        width: 35vw;
+    }
+
+    .button-carousel {
+        display: flex;
+        overflow-x: auto;
+        gap: 1rem;
+        padding: 1rem;
+        scroll-snap-type: x mandatory;
+        
+        button {
+            flex: 0 0 auto;
+            scroll-snap-align: start;
+
+        }
+    }
+}
+
+@media(max-width: 376px) {
+    #rover-button-container {
+        width: 40vw;
+    }
+}
+
+@media(max-width: 320px) {
+    #rover-button-container {
+        width: 47vw;
+    }
+}

src/Components/RoverDetails/RoverDetails.tsx

@@ -36,6 +36,7 @@ function RoverDetails() {
   return (
     <div id="rover-information-container">
       <h2 id="rover-header">CHOOSE A ROVER</h2>
+      <span id="scroll-message">Scroll to pick a rover!</span>
       <div id="rover-button-container" className="button-carousel">
         <button
           className={rover === "spirit" ? "selected-rover" : "not-selected"}