From c79cf8e477b8870e44aa463f83b6af035709da37 Mon Sep 17 00:00:00 2001
From: Tomer S <tomer@shvueli.com>
Date: Thu, 23 May 2019 11:12:47 +0200
Subject: [PATCH] Adjusted styling for mobiles/tablets

---
 hp_assets/css/main.css | 9 +++++----
 index.php              | 2 +-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/hp_assets/css/main.css b/hp_assets/css/main.css
index 1ef7ad6..f5c4fbc 100755
--- 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;}
 }
\ No newline at end of file
diff --git a/index.php b/index.php
index 7989492..2f90363 100755
--- 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>