Fix arrow size and position for mobile screens

intk · Feb 13, 2024 · 483e501 · 483e501
1 parent 3088c84
commit 483e501
Showing 1 changed file with 9 additions and 4 deletions.
diff --git a/frontend/src/components/blocks/Listing/less/HomepageSliderTemplate.less b/frontend/src/components/blocks/Listing/less/HomepageSliderTemplate.less
@@ -78,6 +78,9 @@
     }
     svg{
       fill: var(--bonnefanten-primary);
+      @media screen and (max-width:768px){
+        width: 25px;
+      }
     }
   }
 
@@ -120,8 +123,8 @@
   }
 
   .left-button {
-    margin-top: -10px;
-    margin-left: 27px;
+    margin-top: -6px;
+    margin-left: -8px;
     // width: 36px;
     // height: 55px;
     width: 62px;
@@ -131,6 +134,7 @@
     opacity: 0.6 !important;
 
     @media screen and (min-width: 768px) {
+      margin-left: 27px;
       margin-top: 2px;
     }
     @media screen and (min-width: 1200px) {
@@ -143,8 +147,8 @@
   }
 
   .right-button {
-    margin-top: -10px;
-    margin-right: 27px;
+    margin-top: -6px;
+    margin-right: -8px;
     // width: 36px;
     // height: 55px;
     width: 62px;
@@ -155,6 +159,7 @@
 
     @media screen and (min-width: 768px) {
       margin-top: 2px;
+      margin-right: 27px;
     }
 
     @media screen and (min-width: 1200px) {