diff --git a/src/components/common/slider/CustomArrow.jsx b/src/components/common/slider/CustomArrow.jsx index 5f2f12f..f268dea 100644 --- a/src/components/common/slider/CustomArrow.jsx +++ b/src/components/common/slider/CustomArrow.jsx @@ -33,6 +33,10 @@ const StyledNextArrowButton = styled.div` background-color: ${White}; border-radius: 50%; cursor: pointer; + + @media screen and (max-width: 500px) { + display: none; + } `; const StyledPrevArrowButton = styled.div` @@ -50,4 +54,8 @@ const StyledPrevArrowButton = styled.div` background-color: ${White}; border-radius: 50%; cursor: pointer; + + @media screen and (max-width: 500px) { + display: none; + } `; diff --git a/src/components/main/cateogryAndMap/CategoryAndMap.jsx b/src/components/main/cateogryAndMap/CategoryAndMap.jsx index 9f5d642..3307e0c 100644 --- a/src/components/main/cateogryAndMap/CategoryAndMap.jsx +++ b/src/components/main/cateogryAndMap/CategoryAndMap.jsx @@ -44,8 +44,10 @@ const CategoryAndMapLayout = styled.div` flex-wrap: nowrap; } } + @media screen and (max-width: 768px) { width: 100%; + margin-top: 0px; min-height: 1140px; align-items: center; } diff --git a/src/components/main/slider/MainContentsWrap.jsx b/src/components/main/slider/MainContentsWrap.jsx index 6ebef91..b811cd8 100644 --- a/src/components/main/slider/MainContentsWrap.jsx +++ b/src/components/main/slider/MainContentsWrap.jsx @@ -95,9 +95,15 @@ const SlideContainer = styled.div` margin: 0; } - @media screen and (max-width: 768px) { + @media screen and (max-width: 500px) { width: 100%; gap: 5px; + + /* 라이브러리 기본 스타일을 덮어쓰기 위해 사용 */ + .slick-slide { + width: 210px !important; + } + .slick-dots li button::before { display: none; } diff --git a/src/components/storeCard/StoreCard.jsx b/src/components/storeCard/StoreCard.jsx index e11d577..deda1b5 100644 --- a/src/components/storeCard/StoreCard.jsx +++ b/src/components/storeCard/StoreCard.jsx @@ -54,10 +54,9 @@ const StoreCardContainer = styled.div` } @media screen and (max-width: 500px) { - width: fit-content; - max-width: 280px; + width: 200px; margin: 5px; - height: 350px; + height: 280px; } `; @@ -109,6 +108,12 @@ const NameAndBookmarkContainer = styled.div` text-align: center; font-weight: bold; } + + @media screen and (max-width: 500px) { + & > p { + font-size: 16px; + } + } `; const ContentsContainer = styled.div` @@ -132,4 +137,8 @@ const LocationBox = styled.div` color: ${DarkGrey}; font-size: 14px; + + @media screen and (max-width: 500px) { + display: none; + } `; diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx index caab617..064dd83 100644 --- a/src/pages/MainPage.jsx +++ b/src/pages/MainPage.jsx @@ -97,6 +97,7 @@ const MainPageLayout = styled.div` @media screen and (max-width: 500px) { gap: 10px; + & > img { width: 100%; border-radius: 0px; @@ -112,7 +113,7 @@ const SearchBarContainer = styled.div` } @media screen and (max-width: 500px) { - display: none; + width: 90%; } `; @@ -126,4 +127,8 @@ const SliderContents = styled.section` width: 80%; max-width: 980px; } + + @media screen and (max-width: 500px) { + width: 100%; + } `;