diff --git a/css/main.css b/css/main.css
index e15daf9..4a8172d 100755
--- a/css/main.css
+++ b/css/main.css
@@ -158,13 +158,17 @@ img { width: auto; max-width: 100%; height: auto; }
 .hide-mobile {
   display: none;
 }
-.hide-desktop {
-  display: initial;
+.hide-desktop-inline-block {
+  display: inline-block;
+}
+.hide-desktop-block {
+  display: block;
 }
 
 @media (min-width: 40rem) {
   .hide-desktop { display: none }
-  .hide-mobile { display: initial }
+  .hide-mobile-inline-block { display: inline-block }
+  .hide-mobile-block { display: block }
 }
 
 /*****************************************************************************/
diff --git a/index.html b/index.html
index 2b7a28b..6c5a848 100644
--- a/index.html
+++ b/index.html
@@ -20,7 +20,7 @@ title: Tyler Hallada
         <div class="profile-card-portrait">
           <img src="profile_icon_128x128.png" alt="profile image">
         </div>
-        <hr class="hide-desktop">
+        <hr class="hide-desktop hide-desktop-block">
       </div>
       <div class="column three-fourths">
         <div class="profile-card-content">
diff --git a/magic/index.html b/magic/index.html
index 2667b23..b7c1531 100644
--- a/magic/index.html
+++ b/magic/index.html
@@ -56,8 +56,8 @@ title: Tyler Hallada
     <div class="controls">
       <button id="play-pause"><i class="icon ion-pause"></i></button>
       <button id="clear"><i class="icon ion-refresh"></i></button>
-      <button id="hide-show-mobile" class="hide-desktop"><i class="icon ion-chevron-up"></i></button>
-      <button id="hide-show-desktop" class="hide-mobile"><i class="icon ion-chevron-down"></i></button>
+      <button id="hide-show-mobile" class="hide-desktop hide-desktop-inline-block"><i class="icon ion-chevron-up"></i></button>
+      <button id="hide-show-desktop" class="hide-mobile hide-mobile-inline-block"><i class="icon ion-chevron-down"></i></button>
     </div>
   </div>
   <div id="options" class="container-full hide-mobile">