whatsapp icon mobile

Author: vinicius-saraiva

src/css/custom.css

@@ -158,32 +158,47 @@
   align-items: center;
   justify-content: center;
   padding: 0.5rem;
-  border-radius: 50%;
-  transition: all 0.3s ease;
-  position: relative;
+  transition: color 0.2s ease;
 }
 
 .navbar-whatsapp-link i {
-  font-size: 1.5rem;
+  font-size: 1.2rem;
 }
 
 .navbar-whatsapp-link:hover {
   color: #25D366;
-  transform: scale(1.1);
 }
 
-.navbar-whatsapp-link::after {
-  content: 'Feedback';
-  position: absolute;
-  bottom: -20px;
-  left: 50%;
-  transform: translateX(-50%);
-  font-size: 0.7rem;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  white-space: nowrap;
+/* Desktop only styles */
+@media (min-width: 997px) {
+  .navbar-whatsapp-link {
+    border-radius: 50%;
+  }
+
+  .navbar-whatsapp-link:hover {
+    transform: scale(1.1);
+  }
+
+  .navbar-whatsapp-link::after {
+    content: 'Feedback';
+    position: absolute;
+    bottom: -20px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 0.7rem;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    white-space: nowrap;
+  }
+
+  .navbar-whatsapp-link:hover::after {
+    opacity: 1;
+  }
 }
 
-.navbar-whatsapp-link:hover::after {
-  opacity: 1;
+/* Mobile specific styles */
+@media (max-width: 996px) {
+  .navbar-whatsapp-link i {
+    font-size: 1.1rem; /* Slightly smaller on mobile */
+  }
 }