diff --git a/src/components/Apod/Apod.module.css b/src/components/Apod/Apod.module.css index 6518d4e..a1a4410 100644 --- 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; + } } \ No newline at end of file