diff --git a/src/assets/styles/_news.scss b/src/assets/styles/_news.scss index b4a3f86..9cbe6f5 100644 --- a/src/assets/styles/_news.scss +++ b/src/assets/styles/_news.scss @@ -14,14 +14,15 @@ gap: 1.6rem; } -@media (max-width: 953px) { +@media (max-width: 1200px) { .news-post-wrapper { grid-template-columns: repeat(2, 1fr); } } -@media (max-width: 630px) { +@media (max-width: 768px) { .news-post-wrapper { grid-template-columns: repeat(1, 1fr); + justify-items: center; } } diff --git a/src/assets/styles/_newsPage.scss b/src/assets/styles/_newsPage.scss index 2f5a3a3..65a6e77 100644 --- a/src/assets/styles/_newsPage.scss +++ b/src/assets/styles/_newsPage.scss @@ -3,3 +3,16 @@ grid-template-columns: repeat(3, 1fr); gap: 4rem; } + +@media (max-width: 1200px) { + .news-page-wrapper { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 768px) { + .news-page-wrapper { + grid-template-columns: repeat(1, 1fr); + justify-items: center; + } +} diff --git a/src/assets/styles/_newsPost.scss b/src/assets/styles/_newsPost.scss index 1d33672..9a10ccb 100644 --- a/src/assets/styles/_newsPost.scss +++ b/src/assets/styles/_newsPost.scss @@ -8,6 +8,7 @@ .news-post-img { max-height: 22.1rem; + min-height: 22.1rem; max-width: 100%; width: 100%; height: 100%;