diff --git a/src/components/ChatBox.vue b/src/components/ChatBox.vue index afd2236..8f1ab0e 100644 --- a/src/components/ChatBox.vue +++ b/src/components/ChatBox.vue @@ -190,13 +190,13 @@ border-bottom-right-radius: $global-border-radius; } - @media (max-width: 25rem), (max-height: 30rem) { + @media (max-width: 400px), (max-height: 480px) { bottom: 6.5rem; left: 6.5rem; max-width: calc(100% - 7rem); } - @media (max-width: 20rem) { + @media (max-width: 320px) { .chat__messages .message + .message { margin-bottom: 0.7rem; } diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue index dd6163b..64ae15b 100644 --- a/src/components/Sidebar.vue +++ b/src/components/Sidebar.vue @@ -124,7 +124,7 @@ export default defineComponent({ } } - @media (max-width: 30rem) { + @media (max-width: 480px) { flex-direction: column; align-items: flex-end; margin: 0; @@ -138,7 +138,7 @@ export default defineComponent({ } } - @media (max-width: 25rem) { + @media (max-width: 400px) { right: 0.5rem; top: 0.5rem; } @@ -176,21 +176,21 @@ export default defineComponent({ } } - @media (max-width: 30rem) { + @media (max-width: 480px) { padding-right: 7rem; } - @media (max-width: 25rem), (max-height: 30rem) { + @media (max-width: 400px), (max-height: 480px) { padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 0.5rem; } - @media (max-width: 25rem) { + @media (max-width: 400px) { padding-right: 6.5rem; } - @media (max-width: 20rem) { + @media (max-width: 320px) { box-sizing: border-box; width: 100%; } diff --git a/src/components/chat/ChatMessage.vue b/src/components/chat/ChatMessage.vue index 66b7eeb..94cf01b 100644 --- a/src/components/chat/ChatMessage.vue +++ b/src/components/chat/ChatMessage.vue @@ -106,7 +106,7 @@ font-style: italic; } - @media (max-width: 20rem) { + @media (max-width: 320px) { &.message--chat { .message__sender:after { content: none; diff --git a/src/components/sidebar/FollowTarget.vue b/src/components/sidebar/FollowTarget.vue index 2dcec1d..f5be684 100644 --- a/src/components/sidebar/FollowTarget.vue +++ b/src/components/sidebar/FollowTarget.vue @@ -118,7 +118,7 @@ export default defineComponent({ } } - @media (max-width: 30rem), (max-height: 30rem) { + @media (max-width: 480px), (max-height: 480px) { margin-top: 0; } } diff --git a/src/scss/leaflet/_controls.scss b/src/scss/leaflet/_controls.scss index 4545334..db3d423 100644 --- a/src/scss/leaflet/_controls.scss +++ b/src/scss/leaflet/_controls.scss @@ -125,13 +125,13 @@ } } - @media (max-width: 37.5rem) { + @media (max-width: 600px) { .region { display: none; } } - @media (max-width: 24rem) { + @media (max-width: 384px) { .chunk { display: none; } @@ -186,7 +186,7 @@ margin: 0; } - @media (max-width: 25rem), (max-height: 30rem) { + @media (max-width: 400px), (max-height: 480px) { padding-left: 0.5rem; } } @@ -236,7 +236,7 @@ .leaflet-control-zoom { flex-shrink: 0; - @media (max-width: 30rem) and (pointer: coarse), (max-height: 30rem) and (pointer: coarse), (max-height: 25rem) { + @media (max-width: 480px) and (pointer: coarse), (max-height: 480px) and (pointer: coarse), (max-height: 400px) { display: none; & + .leaflet-control { @@ -245,7 +245,7 @@ } } - @media (max-width: 25rem), (max-height: 30rem) { + @media (max-width: 400px), (max-height: 480px) { padding-top: 0.5rem; bottom: 6.5rem; } @@ -259,7 +259,7 @@ margin-left: 1rem; } - @media (max-width: 25rem), (max-height: 30rem) { + @media (max-width: 400px), (max-height: 480px) { padding-bottom: 0.5rem; } } diff --git a/src/scss/style.scss b/src/scss/style.scss index f63e785..8b00104 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -268,7 +268,7 @@ input { } } - @media (max-width: 30rem), (max-height: 30rem) { + @media (max-width: 480px), (max-height: 480px) { transform: scale(calc((1/6)*5)); transform-origin: top center }