adding styles for the tooltip in mobile so that it's visible

fixing responsive visibility issues in mobile for the tooltip

diff --git a/css/admin.css b/css/admin.css
index f78a964..03b5ec3 100644 (file)
--- a/css/admin.css
+++ b/css/admin.css
@@ -312,7 +312,38 @@ input::placeholder {
     top:-40px;
     width:100%;
 }
-
+a.tooltip, a.tooltip_bottomleft, a.tooltip_left {
+    width: 16px;
+    text-decoration: none;
+    color: grey;
+    zoom: 1;
+    position: relative;
+}
+@media(max-width: 640px){
+    .glm_tooltip p{    /* The tooltip */
+        width: 80vw;
+        padding: 10px;
+        left: 0px;
+    }
+    .glm_tooltip p:before{
+        display: none; /* The pointer of the tooltip */
+        content: '';
+        width:0;
+        height: 0;
+    }
+    a.tooltip, a.tooltip_bottomleft, a.tooltip_left {
+        position: static;
+    }
+}
+@media only screen and (max-width: 639px) {
+    a.tooltip, a.tooltip_bottomleft, a.tooltip_left {
+        left: 5%;
+        width: 80%;
+    }
+}
+.tooltip > p {
+    white-space: normal;
+}
 /* CSS animation */
 
 @-webkit-keyframes fadeIn {
@@ -332,22 +363,7 @@ input::placeholder {
     100% { opacity:100%; }
 }
 
-a.tooltip, a.tooltip_bottomleft, a.tooltip_left {
-    width: 16px;
-    text-decoration: none;
-    color: grey;
-    zoom: 1;
-    position: relative;
-}
-@media only screen and (max-width: 639px) {
-    a.tooltip, a.tooltip_bottomleft, a.tooltip_left {
-        left: 5%;
-        width: 80%;
-    }
-}
-.tooltip > p {
-    white-space: normal;
-}
+
 .fa {
     font: normal normal normal 14px/1 FontAwesome;
     font-size: inherit;