website

website/assets/style.css

@@ -239,29 +239,18 @@ hr {
   margin: 2em 0;
 }
 
-@media (max-width: 550px) {
-  body {
-    padding: 0 20px 40px;
-  }
-
-  .static,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  .col-lbl,
-  p {
-    max-width: 100%;
-  }
-}
-
 #support-plans-slider {
   max-width: 600px;
   margin: 200px auto 150px;
 }
 
+@media (max-width: 550px) {
+  #support-plans-slider {
+    max-width: 98%;
+    margin: 170px auto 120px;
+  }
+}
+
 .noUi-connects {
   cursor: pointer;
 }
@@ -292,6 +281,17 @@ hr {
   padding: 10px;
 }
 
+.noUi-tooltip.first {
+  left: 0;
+  transform: unset;
+}
+
+.noUi-tooltip.last {
+  right: 0;
+  left: unset;
+  transform: unset;
+}
+
 .plan-name {
   font-weight: bold;
   margin-bottom: 10px;
@@ -318,3 +318,21 @@ hr {
 .plan-link:focus {
   background-color: #fdb900;
 }
+
+@media (max-width: 550px) {
+  body {
+    padding: 0 20px 40px;
+  }
+
+  .static,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .col-lbl,
+  p {
+    max-width: 100%;
+  }
+}

website/assets/support_plans.js

@@ -39,6 +39,19 @@ pricingSlider.on('update', function (values, _) {
   const value = parseInt(values[0])
   const el = sliderDiv.querySelector('.noUi-value[data-value="' + value + '"]')
   el.classList.add('active')
+
+  const tooltip = sliderDiv.querySelector('.noUi-tooltip')
+  tooltip.classList.remove('first')
+  tooltip.classList.remove('last')
+
+  if (screen.width < 500) {
+    if (value === 0) {
+      tooltip.classList.add('first')
+    }
+    if (value === priceNumbers.length - 1) {
+      tooltip.classList.add('last')
+    }
+  }
 })
 
 const pips = sliderDiv.querySelectorAll('.noUi-value')