Adjusted styling for mobiles/tablets

tomershvueli · May 23, 2019 · c79cf8e · c79cf8e
1 parent b714cca
commit c79cf8e
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/hp_assets/css/main.css b/hp_assets/css/main.css
@@ -14,7 +14,7 @@ body.menu-shown #bg-overlay {opacity: 0.3;}
 .bg {border-radius: 5px; background-color: rgba(0, 0, 0, .5); padding: 20px;}
 .bg a {color: #fff;}
 
-#links-wrap {font-size: 70px; width: 50%; height: 50%; margin: 25% auto 0; overflow: hidden; padding: 50px; position: relative; overflow-y: scroll;}
+#links-wrap {font-size: 70px; width: 50%; max-height: 50%; margin: 25% auto 0; overflow: hidden; padding: 50px; position: relative; overflow-y: scroll;}
 #links-wrap a {transition: .3s all;}
 #links-wrap .link {display: inline-block; float: left; text-align: center;}
 
@@ -23,8 +23,9 @@ body.menu-shown #bg-overlay {opacity: 0.3;}
 
 #clock-wrap {color: #fff; font-size: 20px; position: absolute; top: 15px; right: 15px;}
 
-@media (min-width: 992px) {
-  #links-wrap {margin-top: 15%; height: auto; font-size: 80px;}
-
+@media (min-width: 768px) {
+  #links-wrap {margin-top: 15%; font-size: 80px;}
+}
+@media (min-width: 576px) {
   #clock-wrap {font-size: 30px;}
 }
diff --git a/index.php b/index.php
@@ -50,7 +50,7 @@ function get_current_url() {
           $icon = $item['icon'];
           $link = str_replace("{{cur}}", get_current_url(), $item['link']);
 
-          echo '<div class="link col-md-4 col-xs-12"><a href="' . $link . '" title="' . $item['alt'] . '"><i class="fa fa-' . $icon . '"></i></a></div>';
+          echo '<div class="link col-md-4 col-sm-6 col-xs-12"><a href="' . $link . '" title="' . $item['alt'] . '"><i class="fa fa-' . $icon . '"></i></a></div>';
         }
       ?>
     </div>