make settings page responsive (#3435)

mozilla-services · Aug 30, 2017 · 5cc3d0e · 5cc3d0e
1 parent 52aa0fe
commit 5cc3d0e
Showing 1 changed file with 28 additions and 5 deletions.
diff --git a/static/css/settings.scss b/static/css/settings.scss
@@ -26,8 +26,19 @@
 
 #settings-header {
   margin: 40px auto 15px;
-  width: 960px;
   position: relative;
+
+  @include respond-to("small") {
+    width: 480px;
+  }
+
+  @include respond-to("medium") {
+    width: 720px;
+  }
+
+  @include respond-to("large") {
+    width: 960px;
+  }
 }
 
 .sub-header {
@@ -39,9 +50,21 @@
 }
 
 .preferences {
-  width: 960px;
+
+  @include respond-to("small") {
+    width: 480px;
+  }
+
+  @include respond-to("medium") {
+    width: 720px;
+  }
+
+  @include respond-to("large") {
+    width: 960px;
+  }
+
   margin: auto;
-  padding-top: 40px;
+  padding: 40px 20px 0 20px;
 
   .info-container {
     margin-left: 30px;
@@ -56,7 +79,7 @@
     height: 1px;
     border: 0;
     border-top: 1px solid #e5e5e5;
-    margin: 1em 0;
+    margin: auto;
     padding: 0;
   }
 
@@ -107,7 +130,7 @@
     &:hover {
       background-color: $light-hover;
     }
-    
+
     &:active {
       background-color: $light-active;
     }