Fixed the Martianlmagery page for mobile screen

PranavBarthwal · Jul 14, 2024 · 561011d · 561011d
1 parent e8dddca
commit 561011d
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/src/components/DisplayDetails/DisplayDetails.module.css b/src/components/DisplayDetails/DisplayDetails.module.css
@@ -1,5 +1,6 @@
 #container {
     height: 550px;
+    max-width: 100%;
     width: fit-content;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
@@ -14,6 +15,7 @@
 
 #rover-img img {
     width: 500px;
+    max-width: 100%;
     border-radius: 20px;
     border: 1px solid white;
 }

diff --git a/src/pages/MarsRover/MarsRover.module.css b/src/pages/MarsRover/MarsRover.module.css
@@ -52,15 +52,19 @@
 #section-2 {
     text-align: center;
     margin: 10% 0;
+    max-width: 100%;
+    overflow: hidden;
 }
 
 #rover-wrapper {
+    max-width: 100%;
     margin-top: 10%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
     gap: 10%;
+
 }
 
 .rover-card {
@@ -101,12 +105,14 @@
 
 .rover-left {
     width: 500px;
+    max-width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
 .rover-model {
+    max-width: 100%;
     width: inherit;
     padding: 23px;
     background: rgb(201, 198, 198);
@@ -135,6 +141,7 @@
         padding: 0;
         margin: 0;
         width: 400px;
+        max-width: 100%;
         padding: 20px;
     }
 
@@ -150,13 +157,20 @@
     }
 
     .rover-left {
+        max-width: 100%;
         width: 350px;
     }
 
     #rover-wrapper {
         gap: 50px;
     }
 
+    .rover-launch-info {
+    padding: 0.5rem;
+    border-radius: 0px 0px 20px 20px;
+    max-width: 100%
+}
+
 
 }