Made share button more mobile friendly

Author: JulianPrieber

littlelink/css/share.button.css

@@ -31,24 +31,44 @@
   -webkit-transform: translateY(-150px);
   transform: translateY(-150px);
 }
-.sharebutton,
-sharebutton {
-  display: inline-block;
-  text-decoration: none;
-  height: 48px;
-  text-align: center;
-  vertical-align: middle;
-  font-size: 18px;
-  width: 150px;
-  font-weight: 700;
-  line-height: 48px;
-  letter-spacing: 0.1px;
-  white-space: wrap;
-  border-radius: 8px;
-  cursor: pointer;
-  color: #000000; 
-  background-color: #efefef
- }
+  .sharebutton,
+  sharebutton {
+    display: inline-block;
+    text-decoration: none;
+    height: 48px;
+    text-align: center;
+    vertical-align: middle;
+    font-size: 18px;
+    width: 48px;
+    font-weight: 700;
+    line-height: 48px;
+    letter-spacing: 0.1px;
+    white-space: wrap;
+    border-radius: 8px;
+    cursor: pointer;
+    color: #000000; 
+    background-color: #efefef
+   }
+@media screen and (min-width: 600px) {
+  .sharebutton,
+  sharebutton {
+    display: inline-block;
+    text-decoration: none;
+    height: 48px;
+    text-align: center;
+    vertical-align: middle;
+    font-size: 18px;
+    width: 150px;
+    font-weight: 700;
+    line-height: 48px;
+    letter-spacing: 0.1px;
+    white-space: wrap;
+    border-radius: 8px;
+    cursor: pointer;
+    color: #000000; 
+    background-color: #efefef
+   }
+}
 sharebutton:hover,
 .sharebutton:hover {
   color: #000000;
@@ -62,4 +82,16 @@ sharebutton:hover,
 .sharebutton.sharebutton-primary:hover,
 .sharebutton.sharebutton-primary:focus {
   color: #FFFFFF;
-  filter: brightness(90%) }
+  filter: brightness(90%) }
+
+  @media screen and (max-width: 600px) {
+    .sharebutton-mb {
+     display: none;
+    }
+    .sharebutton-img {
+      position: relative;
+      left: 3px;
+      margin-left: auto;
+      margin-right: auto;
+     }
+   }

resources/views/littlelink.blade.php

@@ -107,12 +107,12 @@ function get_operating_system() {
 
 @if($user_browser === 'Chrome' or get_operating_system() == 'mobile')
 <script  src="{{ asset('littlelink/js/jquery.min.js') }}"></script>
-<div align="right" class="sharediv"><div class="button-entrance"><a class="sharebutton hvr-grow hvr-icon-wobble-vertical" id='share-share-button'><img class="icon hvr-icon" src="{{ asset('\/littlelink/icons\/')}}share.svg">Share</a></div></div>
+<div align="right" class="sharediv"><div class="button-entrance"><a class="sharebutton hvr-grow hvr-icon-wobble-vertical" id='share-share-button'><img class="sharebutton-img icon hvr-icon" src="{{ asset('\/littlelink/icons\/')}}share.svg"><span class="sharebutton-mb">Share</span></a></div></div>
 <span class="copy-icon" role="button">
 </span>
 @else
 <span class="copy-icon" role="button">
-<div align="right" class="sharediv"><div class="button-entrance"><a class="sharebutton hvr-grow hvr-icon-wobble-vertical"><img class="icon hvr-icon" src="{{ asset('\/littlelink/icons\/')}}share.svg">Share</a></div></div>
+<div align="right" class="sharediv"><div class="button-entrance"><a class="sharebutton hvr-grow hvr-icon-wobble-vertical"><img class="sharebutton-img icon hvr-icon" src="{{ asset('\/littlelink/icons\/')}}share.svg"><span class="sharebutton-mb">Share</span></a></div></div>
 </span>
 @endif
 <div class="toastdiv">