diff --git a/src/features/BuyMatchPopup/components/SubscriptionsList/styled.tsx b/src/features/BuyMatchPopup/components/SubscriptionsList/styled.tsx index 6c8b24ac..b382a08f 100644 --- a/src/features/BuyMatchPopup/components/SubscriptionsList/styled.tsx +++ b/src/features/BuyMatchPopup/components/SubscriptionsList/styled.tsx @@ -23,6 +23,15 @@ export const List = styled.ul` @media (max-width: 1370px) { max-height: 415px; } + + @media (max-height: 768px) { + max-height: 280px; + } + + @media (max-height: 500px) { + max-height: 140px; + } + ${isMobileDevice ? css` padding: 0; @@ -68,8 +77,7 @@ export const Item = styled.li.attrs(() => ({ } @media (max-width: 750px) { - min-height: 52.29px; - height: 52.29px; + height: 100%; } ${isMobileDevice ? css` diff --git a/src/features/BuyMatchPopup/styled.tsx b/src/features/BuyMatchPopup/styled.tsx index 0baf9ecd..5fecfbcb 100644 --- a/src/features/BuyMatchPopup/styled.tsx +++ b/src/features/BuyMatchPopup/styled.tsx @@ -85,9 +85,16 @@ export const Wrapper = styled.div` width: ${({ width }) => (width ? `${width}px` : '830px')}; padding: 20px 0 20px; + @media (max-width: 750px){ + width: 100%; + padding: 40px 10px 20px; + display: flex; + flex-direction: column; + justify-content: space-evenly; + } + ${isMobileDevice ? css` - @media screen and (orientation: landscape){ padding: 17px 10px 15px; width: 100%;