Merge pull request #395 from nagalakshmi08/issue374

Fix: Made image in APOTD responsive.
PranavBarthwal · Jun 12, 2024 · 520bdde · 520bdde
2 parents ec323bc + bf6895c
commit 520bdde
Showing 1 changed file with 16 additions and 5 deletions.
diff --git a/src/components/Apod/Apod.module.css b/src/components/Apod/Apod.module.css
@@ -6,6 +6,11 @@
     font-weight: bold;
 }
 
+.apod_img_container {
+    width: 500px;
+    height: 500px;
+}
+
 @media (max-width: 765px) {
     .section_title_mobile {
         font-size: 2rem;
@@ -16,6 +21,7 @@
     }
     .apod_img_container{
         width: 100%;
+        height: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -27,15 +33,13 @@
 
 }
 
-.apod_img_container {
-    width: 500px;
-    height: 500px;
-}
-
 #apod_img {
     aspect-ratio: 5 / 4;
     border-radius: 25px;
     position: relative;
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: cover;
 }
 
 #apod_img:hover {
@@ -48,4 +52,11 @@
     height: 400px;
     display: flex;
     justify-content: center;
+}
+
+@media screen and (max-width:768px) {
+    .img{
+        height: 100%;
+        margin-bottom: 30px;
+    }
 }