update

.idea/watcherTasks.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectTasksOptions" suppressed-tasks="SCSS" />
+</project>

src/App.scss

@@ -77,9 +77,10 @@ input {
 }
 
 .logo-large {
-  height: 700px;
+  height: auto;
+  max-height: 700px;
   @media (max-width: $breakpoint-tablet) {
-    height: 400px;
+    max-height: 400px;
   }
 }
 
@@ -97,7 +98,7 @@ input {
   height: 600px;
   @media (max-width: $breakpoint-tablet) {
     margin-left: 50px;
-    height: 300px;
+    max-height: 300px;
   }
 }
 
@@ -185,22 +186,75 @@ footer {
   width: 100%;
   background-color: #303030;
   position: fixed;
-right: 0px;
  bottom: 0px;
-  .Player {
-    margin-top: 10px;
-    button {
-      margin: 5px;
-    }
 
-    .currentTime {
-      width: 30%;
+  @media (max-width: $breakpoint-mobile) {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+
+.Player {
+  margin-top: 10px;
+  button {
+    margin: 5px;
+  }
+
+  @media (max-width: $breakpoint-mobile) {
+    h3 {
+      font-size: 14px;
     }
+  }
+}
 
+.currentTime {
+  width: 70vh;
+  @media (max-width: $breakpoint-tablet) {
+    width: 50vh;
+  }
+  @media (max-width: $breakpoint-mobile) {
+    width: 80%;
   }
 }
 
 
+.player-nav {
+  display: flex;
+  justify-content: center;
+  @media (max-width: $breakpoint-mobile) {
+  flex-direction: column;
+    font-size: 10px;
+  }
+}
+
+.track-timer {
+  margin-top: 8px;
+  @media (max-width: $breakpoint-mobile) {
+    margin-top: 2px;
+  }
+}
+
+
+.player-current-time {
+  display: flex;
+  @media (max-width: $breakpoint-mobile) {
+    justify-content: center;
+    display: flex;
+    flex-direction: row;
+  }
+}
+
+.volume {
+  width: 100px;
+}
+
+.vol-buttons {
+  display: flex;
+  justify-content: center;
+}
+
+
 .LoginButtons {
   display: flex;
   flex-direction: row;
@@ -282,6 +336,9 @@ right: 0px;
 
 .my-playlists {
   margin-top: 8px;
+  input {
+    width: auto;
+  }
 }
 
 .drop-zone {

src/pages/header/logo.js

@@ -5,4 +5,4 @@ export const Logo = () =>
     <Link to='/'><img src={logo} className="App-logo" alt="logo" /></Link>
 
 export const LogoLarge = () =>
-    <Link to='/'><img src={logo} className="logo-large" alt="logo" /></Link>
+ <img src={logo} className="logo-large" alt="logo" />

src/pages/player.js

@@ -23,8 +23,11 @@ export const Player = ({player:{token,volume,duration=0,currentTime=0,isPlaying,
     return (
         <div className='Player'>
 
-            <span>{minutesLeft || 0}:{(secondsLeft < 10?"0"+secondsLeft : secondsLeft) || "00"}</span>
 
+            <div className='player-nav'>
+
+                <div className='player-current-time'>
+            <span className='track-timer'>{minutesLeft || 0}:{(secondsLeft < 10?"0"+secondsLeft : secondsLeft) || "00"}</span>
             <input className='currentTime'
                 type="range"
                 min={0}
@@ -32,25 +35,29 @@ export const Player = ({player:{token,volume,duration=0,currentTime=0,isPlaying,
                 max={duration ? duration : `${duration}`}
                 onChange={(e) => trackCurrentTime(e.target.value)}
                 value={currentTime}/>
+            <span className='track-timer'>{minutes || 0}:{(seconds < 10?"0"+seconds : seconds) || "00"}</span>
+                </div>
 
 
-            <span>{minutes || 0}:{(seconds < 10?"0"+seconds : seconds) || "00"}</span>
+             <div className="vol-buttons">
+ <div className='player-buttons'>
             <button onClick={() => trackPrevious()}><img src={prev} alt='prev'/></button>
             {!isPlaying ? (   <button onClick={() => trackPlay()}>
                 <img src={play}  alt='play'/></button>) : (     <button onClick={() => trackStop()}>
                 <img src={pause}  alt='pause'/></button>)}
-
-
-
-
             <button onClick={()=>trackNext()}><img src={next}  alt='next'/></button>
-            <input
+ </div>
+
+            <input className='volume'
                 type="range"
                 min={0}
                 step={0.1}
                 max={1}
                 onChange={(e) => trackVolume(e.target.value)}
                 value={volume}/>
+            </div>
+            </div>
+
                 <h3>{name || ''}</h3>
         </div>
     )