diff --git a/src/features/ProfileHeader/styled.tsx b/src/features/ProfileHeader/styled.tsx index e3b26ff4..165d552f 100644 --- a/src/features/ProfileHeader/styled.tsx +++ b/src/features/ProfileHeader/styled.tsx @@ -63,17 +63,21 @@ export const HeaderLogo = styled(Logo)` margin-top: 4px; ${isMobileDevice ? css` - width: 85px; - height: 20px; - left: 48vw; - top: 5px; - transform: translateX(-50%); - position: absolute; - - @media screen and (orientation: landscape){ + @media (max-width: 650px){ + width: 85px; + height: 20px; + left: 48vw; + top: 5px; + transform: translateX(-50%); + position: absolute; + } + + @media (orientation: landscape){ + left: 42vw; width: 97px; height: 23px; margin-top: 0; + position: absolute; } ` : ''} diff --git a/src/features/StreamPlayer/components/VolumeBar/styled.tsx b/src/features/StreamPlayer/components/VolumeBar/styled.tsx index 93b37b8a..90be55e9 100644 --- a/src/features/StreamPlayer/components/VolumeBar/styled.tsx +++ b/src/features/StreamPlayer/components/VolumeBar/styled.tsx @@ -54,7 +54,7 @@ export const VolumeProgressList = styled.div` ${isMobileDevice ? css` - display: none; + margin-right: 10px; @media (orientation: landscape){ display: block; } diff --git a/src/features/StreamPlayer/styled.tsx b/src/features/StreamPlayer/styled.tsx index 3e4708e6..23ead925 100644 --- a/src/features/StreamPlayer/styled.tsx +++ b/src/features/StreamPlayer/styled.tsx @@ -32,7 +32,7 @@ export const Controls = styled.div` ${isMobileDevice ? css` - bottom: 0; + bottom: 5px; @media (orientation: landscape){ width: 100%; left: 50%; @@ -81,6 +81,7 @@ export const ControlsGroup = styled.div` ? css` :last-child { margin-left: auto; + margin-right: 10px; } ` : ''}; @@ -230,10 +231,9 @@ export const Backward = styled(ButtonBase)` ${isMobileDevice ? css` - width: 20%; - height: 40%; + width: 15%; font-size: 14px; - margin-right: 0; + margin-right: 6px; ` : ''}; ` @@ -255,7 +255,8 @@ export const PlaybackTime = styled.span` ${isMobileDevice ? css` font-size: 10px; - width: 130px; + width: 100px; + white-space: nowrap; ` : ''}; ` @@ -295,4 +296,12 @@ export const LiveBtn = styled(ButtonBase)` padding: 4.5px 8px; background-color: #CC0000; border-radius: 1.3px; + + ${isMobileDevice + ? css` + @media (max-width: 650px){ + margin-right: 7px; + } + ` + : ''}; `