mobile fixed?

index.html

@@ -18,7 +18,7 @@
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
     <link rel="manifest" href="/favicon/site.webmanifest">
 
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
@@ -120,7 +120,8 @@ <h2 class="mt-2">FRIENDS</h2>
                 </div>
                 <div class="module">
                     <h2 id="musicbox_title" title="Updates every 15 seconds">now playing:</h2>
-                    <a href="" id="musicbox_songlink" target="_blank"><img src="images/grid.png" id="musicbox_cover" class="musicbox-img mb-3" alt=""></a>
+                    <a href="" id="musicbox_songlink" target="_blank"><img src="images/grid.png" id="musicbox_cover"
+                            class="musicbox-img mb-3" alt=""></a>
                     <div class="d-flex flex-column">
                         <p class="m-0 musicbox-text" id="musicbox_song" title="Song name">...</p>
                         <p class="m-0 musicbox-text" id="musicbox_artist" title="Artist">...</p>

styles/style.css

@@ -152,7 +152,7 @@ h3 {
   box-shadow: 0 0 0.5vh 0.1vh #ff80ff;
 }
 
-@media only screen and (max-width: 1000px) {
+@media only screen and (max-width: 600px) {
   .middle {
     width: 95%;
     flex-direction: column;

styles/style.scss

@@ -142,7 +142,7 @@ h3 {
     box-shadow: 0 0 0.5vh 0.1vh $main_color;
 }
 
-@media only screen and (max-width: 1000px) {
+@media only screen and (max-width: 600px) {
     .middle {
         width: 95%;
         flex-direction: column;