Merge pull request #1363 from alphagov/footer-fix

Fix alignment and spacing of page footer on mobile

app/assets/stylesheets/app.scss

@@ -126,26 +126,6 @@ td {
   margin-top: $gutter;
 }
 
-#footer {
-
-  .footer-categories {
-
-    @extend %site-width-container;
-
-    &-wrapper {
-      padding: 0 0 $gutter * 2;
-      margin: 0 0 $gutter;
-      border-bottom: 1px solid $border-colour;
-    }
-
-    h2 {
-      margin: 0 0 $gutter-two-thirds;
-    }
-
-  }
-
-}
-
 .form-label {
   margin-bottom: 5px;
 }

app/assets/stylesheets/components/site-footer.scss

@@ -0,0 +1,29 @@
+#footer {
+  .footer-categories {
+    margin: 0 auto;
+
+    &-wrapper {
+      margin-bottom: $gutter;
+      padding-bottom: $gutter * 2;
+      border-bottom: 1px solid $grey-2;
+    }
+
+    h2 {
+      margin: 20px 0;
+
+      @include media(tablet) {
+        margin-top: 0;
+      }
+    }
+
+    ul {
+      margin: 0;
+      padding: 0;
+    }
+
+    li {
+      margin-bottom: 5px;
+      font-size: 16px;
+    }
+  }
+}

app/assets/stylesheets/main.scss

@@ -34,6 +34,7 @@ $path: '/static/images/';
 
 // Specific to this application
 @import 'grids';
+@import 'components/site-footer';
 @import 'components/placeholder';
 @import 'components/sms-message';
 @import 'components/page-footer';