diff --git a/src/components/Articles/ArticleCard/ArticleCard.scss b/src/components/Articles/ArticleCard/ArticleCard.scss index 5da5c27..081789f 100644 --- a/src/components/Articles/ArticleCard/ArticleCard.scss +++ b/src/components/Articles/ArticleCard/ArticleCard.scss @@ -9,7 +9,7 @@ & img { border-radius: 7px; width: 100%; - height: 260px; + height: 240px; object-fit: cover; } } @@ -66,6 +66,16 @@ @media (max-width: 768px) { .article-card { width: 100%; + &__image { + & img { + height: 400px; + } + } + } +} + +@media (max-width: 568px) { + .article-card { &__image { & img { height: 300px; @@ -74,7 +84,7 @@ } } -@media (max-width: 400px) { +@media (max-width: 430px) { .article-card { width: 100%; &__image { diff --git a/src/hooks/useMoreArticlesQuery.js b/src/hooks/useMoreArticlesQuery.js index de49d06..cfdcab7 100644 --- a/src/hooks/useMoreArticlesQuery.js +++ b/src/hooks/useMoreArticlesQuery.js @@ -17,7 +17,7 @@ const useMoreArticlesQuery = () => { title image { childImageSharp { - fluid { + fluid(maxWidth: 650 quality: 100) { ...GatsbyImageSharpFluid } }