diff --git a/src/components/common/skillTagBox/skillTag/skillTagImg/SkillTagImg.styled.ts b/src/components/common/skillTagBox/skillTag/skillTagImg/SkillTagImg.styled.ts index 1cf75bba..5f157f11 100644 --- a/src/components/common/skillTagBox/skillTag/skillTagImg/SkillTagImg.styled.ts +++ b/src/components/common/skillTagBox/skillTag/skillTagImg/SkillTagImg.styled.ts @@ -17,6 +17,6 @@ export const SkillImg = styled.img>` } @media screen and ${({ theme }) => theme.mediaQuery.mobile} { - width: 1.8rem; + width: 1.5rem; } `; diff --git a/src/components/home/projectCardLists/ProjectCardLists.styled.ts b/src/components/home/projectCardLists/ProjectCardLists.styled.ts index 2dbbf70e..65f32d58 100644 --- a/src/components/home/projectCardLists/ProjectCardLists.styled.ts +++ b/src/components/home/projectCardLists/ProjectCardLists.styled.ts @@ -23,7 +23,7 @@ export const Wrapper = styled.div<{ $flex: boolean }>` width: 100%; display: ${({ $flex }) => ($flex ? 'flex' : 'grid')}; grid-template-columns: ${({ $flex }) => - $flex ? '' : 'repeat(auto-fit, minmax(30%, auto))'}; + $flex ? '' : 'repeat(auto-fit, minmax(30%, 1fr))'}; place-items: ${({ $flex }) => ($flex ? '' : 'center')}; /* justify-content: space-evenly; */ gap: 3rem; @@ -34,14 +34,14 @@ export const Wrapper = styled.div<{ $flex: boolean }>` @media screen and ${({ theme }) => theme.mediaQuery.tablet} { grid-template-columns: ${({ $flex }) => - $flex ? '' : 'repeat(auto-fit, minmax(40%, auto))'}; + $flex ? '' : 'repeat(auto-fit, minmax(40%, 1fr))'}; gap: 2rem; } @media screen and ${({ theme }) => theme.mediaQuery.mobile} { width: 100%; grid-template-columns: ${({ $flex }) => - $flex ? '' : 'repeat(auto-fit, minmax(50%, auto))'}; + $flex ? '' : 'repeat(auto-fit, minmax(50%, 1fr))'}; gap: 1rem; } `; diff --git a/src/components/home/searchFiltering/filteringContents/FilteringContents.styled.ts b/src/components/home/searchFiltering/filteringContents/FilteringContents.styled.ts index 1637e778..bfb83f6f 100644 --- a/src/components/home/searchFiltering/filteringContents/FilteringContents.styled.ts +++ b/src/components/home/searchFiltering/filteringContents/FilteringContents.styled.ts @@ -22,7 +22,7 @@ export const Container = styled.div` @media screen and ${({ theme }) => theme.mediaQuery.mobile} { display: grid; - grid-template-columns: repeat(auto-fill, minmax(45%, auto)); + grid-template-columns: repeat(auto-fit, minmax(45%, auto)); gap: 0.5rem; > * { width: 100%; diff --git a/src/components/home/searchFiltering/filteringContents/filtering/Filtering.styled.ts b/src/components/home/searchFiltering/filteringContents/filtering/Filtering.styled.ts index 042a2913..8cd20c61 100644 --- a/src/components/home/searchFiltering/filteringContents/filtering/Filtering.styled.ts +++ b/src/components/home/searchFiltering/filteringContents/filtering/Filtering.styled.ts @@ -44,7 +44,7 @@ export const SelectWrapper = styled.div` export const SelectButton = styled.button` width: 100%; display: block; - font-size: 01rem; + font-size: 1rem; text-align: initial; padding: 0.5rem; @@ -52,4 +52,8 @@ export const SelectButton = styled.button` background-color: ${({ theme }) => theme.color.navy}; color: ${({ theme }) => theme.color.white}; } + + @media screen and ${({ theme }) => theme.mediaQuery.mobile} { + font-size: 0.9rem; + } `; diff --git a/src/components/home/searchFiltering/search/Search.styled.ts b/src/components/home/searchFiltering/search/Search.styled.ts index 32f0966d..9fc65348 100644 --- a/src/components/home/searchFiltering/search/Search.styled.ts +++ b/src/components/home/searchFiltering/search/Search.styled.ts @@ -14,6 +14,7 @@ export const Container = styled.div` @media screen and ${({ theme }) => theme.mediaQuery.mobile} { padding: 0.4rem 0; + width: 100%; } `;