From 002e945bbe930207dfca4b5b02c2e3385a4c3b23 Mon Sep 17 00:00:00 2001
From: Marco Kaiser <kaiserkiwi@icloud.com>
Date: Sun, 17 Nov 2024 08:15:40 +0100
Subject: [PATCH] feat: Optimize the cyber score slider to fit better on mobile

---
 css/style.css | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/css/style.css b/css/style.css
index 6286641..2033314 100644
--- a/css/style.css
+++ b/css/style.css
@@ -443,21 +443,25 @@ button:active {
 /* Slider */
 .slider-container {
     margin: 20px 0;
-    text-align: center;
     color: var(--cyber-font-color);
     display: flex;
+	flex-wrap: wrap;
     align-items: center;
-    justify-content: center;
-    gap: 15px;
+	text-align: center;
+    gap: var(--spacing-sm) var(--spacing-md);
 }
 
 .slider-container label {
     font-size: 1.2rem;
+
+	@media (width < 568px) {
+		width: 100%;
+	}
 }
 
 input[type="range"] {
     -webkit-appearance: none;
-    width: 70%;
+    flex: 1;
     margin: 10.5px 0;
     background-color: var(--cyber-faq-bg-color);
 }
@@ -539,7 +543,6 @@ input[type="range"]::-ms-thumb {
 
 #sliderValueDisplay {
     font-size: 1.1rem;
-    margin-left: 10px;
     color: var(--cyber-primary-color);
     font-weight: bold;
 }