diff --git a/src/components/NewsCard.tsx b/src/components/NewsCard.tsx index dc9a3e3..809fc82 100644 --- a/src/components/NewsCard.tsx +++ b/src/components/NewsCard.tsx @@ -76,14 +76,18 @@ export const ReadMoreButton = styled.button` ` const TimelineDot = styled.div<{ labelsOnLeft?: boolean }>` - width: 16px; + width: 6.4%; height: 2px; background-color: ${Color.orange900}; position: absolute; - left: ${props => (props.labelsOnLeft ? '-20px' : 'calc(100% + 22px)')}; + left: ${props => (props.labelsOnLeft ? 'calc(-3.2%)' : 'calc(100% + 3.2%)')}; top: 28px; transform: translate(-50%, -50%); z-index: -1; + + @media (max-width: ${ScreenSize.md}) { + display: none; + } ` interface Props { diff --git a/src/components/NewsModal.tsx b/src/components/NewsModal.tsx index 1a8f907..8c55e89 100644 --- a/src/components/NewsModal.tsx +++ b/src/components/NewsModal.tsx @@ -21,6 +21,7 @@ const ModalContainer = styled.div` const ModalCard = styled.div` width: 70%; + max-width: ${ScreenSize.max}; background-color: ${Color.white}; padding: 48px; border-radius: 5px; @@ -30,6 +31,8 @@ const ModalCard = styled.div` @media (max-width: ${ScreenSize.lg}) { width: 90%; + max-height: 90%; + padding: 24px 16px; } `