diff --git a/src/renderer/features/lyrics/synchronized-lyrics.tsx b/src/renderer/features/lyrics/synchronized-lyrics.tsx
index 2a6696e5d..19cba8c48 100644
--- a/src/renderer/features/lyrics/synchronized-lyrics.tsx
+++ b/src/renderer/features/lyrics/synchronized-lyrics.tsx
@@ -41,7 +41,7 @@ const SynchronizedLyricsContainer = styled.div<{ $gap: number }>`
         transparent 95%
     );
 
-    @media screen and (width <= 768px) {
+    @media screen and (orientation: portrait) {
         padding: 5vh 0;
     }
 `;
diff --git a/src/renderer/features/lyrics/unsynchronized-lyrics.tsx b/src/renderer/features/lyrics/unsynchronized-lyrics.tsx
index 8bb6f71ba..251f0196a 100644
--- a/src/renderer/features/lyrics/unsynchronized-lyrics.tsx
+++ b/src/renderer/features/lyrics/unsynchronized-lyrics.tsx
@@ -34,7 +34,7 @@ const UnsynchronizedLyricsContainer = styled.div<{ $gap: number }>`
         transparent 95%
     );
 
-    @media screen and (width <= 768px) {
+    @media screen and (orientation: portrait) {
         padding: 5vh 0;
     }
 `;
diff --git a/src/renderer/features/player/components/full-screen-player.tsx b/src/renderer/features/player/components/full-screen-player.tsx
index f3c2d7104..af031c574 100644
--- a/src/renderer/features/player/components/full-screen-player.tsx
+++ b/src/renderer/features/player/components/full-screen-player.tsx
@@ -39,7 +39,7 @@ const Container = styled(motion.div)`
     justify-content: center;
     padding: 2rem;
 
-    @media screen and (width <= 768px) {
+    @media screen and (orientation: portrait) {
         padding: 2rem 2rem 1rem;
     }
 `;
@@ -53,7 +53,7 @@ const ResponsiveContainer = styled.div`
     max-width: 2560px;
     margin-top: 5rem;
 
-    @media screen and (width <= 768px) {
+    @media screen and (orientation: portrait) {
         grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
         grid-template-columns: minmax(0, 1fr);
         margin-top: 0;