From 79b0c9c8f7f110b930a0b6560e113f6b74e730af Mon Sep 17 00:00:00 2001
From: Ben Grabau <ben.grabau@chrishumphrey.com.au>
Date: Mon, 24 Jul 2023 13:33:19 +1000
Subject: [PATCH] Slider snap points

Fixed snap points for sliders. Vertically centered call type icons.
---
 pbx.html | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/pbx.html b/pbx.html
index cd91d6a..f9c73da 100644
--- a/pbx.html
+++ b/pbx.html
@@ -65,14 +65,15 @@
         }
 
         /* icons in cards */
-        .card .image i {
+        .card .image > i.icon {
             display: block;
             margin-left: auto;
             margin-right: auto;
             width: 50%;
-        }
-
+            margin-bottom: 25%;
+            margin-top: 25%;
 
+        }
         /* .yellow {
             color:  rgb(245, 209, 47);
         } */
@@ -107,7 +108,7 @@
     <br>
     <div class="ui inverted vertical masthead left aligned segment" style="background-color: rgb(0, 44, 117)">
         <div class="ui container">
-            <img class="ui medium right floated image" src="yealink-cordless.png">
+            <img class="ui medium right floated image" src="yealink-cordless.png" style="margin-top: -5em">
             <h3 class="ui inverted yellow header">
                 Exclusive offer
             </h3>
@@ -126,12 +127,13 @@
     </div>
     <div class="ui container" id="aboutyourbusiness">
         <h4 class="ui dividing header">About your business</h4>
-        <div class="ui grid">
-            <div class="eight wide column">
+        <div class="ui stackable grid">
+            <div class="left floated seven wide column">
                 <p>How many staff do you have?</p>
                 <div class="ui labeled ticked slider" id="numberofstaff"></div>
             </div>
-            <div class="eight wide column">
+            <!-- <div class="two wide column"></div> -->
+            <div class="right floated seven wide column">
                 <p>How many sites do you have?</p>
                 <div class="ui labeled ticked slider" id="numberofsites"></div>
             </div>