From 0322c47a588e5b89d43a8e6632609e71680d8691 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Mon, 13 Dec 2021 09:10:26 +0100
Subject: [PATCH] Fixed audio card responsive behaviour on frontend

Refs https://github.com/TryGhost/Team/issues/1230
---
 core/frontend/src/cards/css/audio.css | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/core/frontend/src/cards/css/audio.css b/core/frontend/src/cards/css/audio.css
index 479dc9b7fe..7c9efff2b2 100644
--- a/core/frontend/src/cards/css/audio.css
+++ b/core/frontend/src/cards/css/audio.css
@@ -41,7 +41,7 @@
     padding: 8px 12px 0;
     border: none;
     font-family: inherit;
-    font-size: 1em;
+    font-size: 1.1em;
     font-weight: 700;
     background: transparent;
 }
@@ -101,6 +101,12 @@
     margin: 0 4px;
 }
 
+@media (max-width: 640px) {
+    .kg-audio-seek-slider {
+        display: none;
+    }
+}
+
 .kg-audio-playback-rate {
     min-width: 37px;
     padding: 0 4px;
@@ -113,6 +119,12 @@
     white-space: nowrap;
 }
 
+@media (max-width: 640px) {
+    .kg-audio-playback-rate {
+        padding-left: 8px;
+    }
+}
+
 .kg-audio-mute-icon,
 .kg-audio-unmute-icon {
     position: relative;
@@ -122,6 +134,13 @@
     background: transparent;
 }
 
+@media (max-width: 640px) {
+    .kg-audio-mute-icon,
+    .kg-audio-unmute-icon  {
+        margin-left: auto;
+    }
+}
+
 .kg-audio-mute-icon svg,
 .kg-audio-unmute-icon svg {
     width: 16px;
@@ -133,6 +152,12 @@
     width: 80px;
 }
 
+@media (max-width: 400px) {
+    .kg-audio-volume-slider {
+        display: none;
+    }
+}
+
 .kg-audio-seek-slider::before {
     content: "";
     position: absolute;