diff --git a/view/css/widgets.css b/view/css/widgets.css
index 6cd61ae6f..cea3a3820 100644
--- a/view/css/widgets.css
+++ b/view/css/widgets.css
@@ -57,7 +57,13 @@ li:hover .widget-nav-pills-icons {
 
 /*  affinity slider */
 #main-slider {
-	margin: 10px 7px 45px 7px;
+	margin: 10px 7px 4rem 7px;
+}
+
+@media screen and (max-width: 767px) {
+	#main-slider {
+		margin: 4rem 7px 4rem 7px;
+	}
 }
 
 /* posted date */
diff --git a/view/tpl/main_slider.tpl b/view/tpl/main_slider.tpl
index 4cc265f59..f5c573970 100755
--- a/view/tpl/main_slider.tpl
+++ b/view/tpl/main_slider.tpl
@@ -1,5 +1,9 @@
-<div id="main-slider" class="slider" ><input id="main-range" type="text" name="cminmax" value="{{$val}}" /></div>
-<div id="profile-jot-text-loading" class="spinner-wrapper"><div class="spinner m"></div></div>
+<div id="main-slider" class="slider" >
+	<input id="main-range" type="text" name="cminmax" value="{{$val}}" />
+	<div id="profile-jot-text-loading" class="spinner-wrapper">
+		<div class="spinner m"></div>
+	</div>
+</div>
 <script>
 $(document).ready(function() {
 	var old_cmin = 0;