Fix device breaks

Author: achan

app/styles/app.scss

@@ -27,6 +27,7 @@
 body {
   background-color: $white;
   padding-top: $nav-bar-height;
+  font-size: 14px;
   @include body-font();
 }
 

app/styles/components/bulletin-navigator.scss

@@ -15,7 +15,7 @@
     }
   }
 
-  @media only screen and (min-width: $medium-device-break) {
+  @media only screen and (min-width: $large-device-break) {
     padding-left: $padding-xl;
   }
 }

app/styles/components/mcac-header.scss

@@ -1,8 +1,9 @@
 .navbar {
-  z-index: 100;
   background-color: $white;
   border-style: none;
+  padding: 0;
   width: 100%;
+  z-index: 100;
 
   .navbar-header {
     float: none;
@@ -14,6 +15,7 @@
       color: $black;
       float: none;
       line-height: $nav-bar-height;
+      margin-right: 0;
       padding: 0;
       position: relative;
 
@@ -35,7 +37,7 @@
     display: initial !important;
   }
 
-  @media only screen and (min-width: $small-device-break) {
+  @media only screen and (min-width: $medium-device-break) {
     .navbar-header .navbar-brand {
       margin-left: 0;
     }

app/styles/components/nav-bar.scss

@@ -35,7 +35,7 @@
     display: inline-block;
   }
 
-  @media only screen and (min-width: $small-device-break) {
+  @media only screen and (min-width: $medium-device-break) {
     .navbar-brand {
       padding-left: 15px;
       padding-right: 15px;

app/styles/components/post-view.scss

@@ -130,7 +130,7 @@
     }
   }
 
-  @media only screen and (min-width: $small-device-break) {
+  @media only screen and (min-width: $medium-device-break) {
     border-width: $padding-xs;
 
     .banner {
@@ -147,7 +147,7 @@
     }
   }
 
-  @media only screen and (min-width: $medium-device-break) {
+  @media only screen and (min-width: $large-device-break) {
     h1 {
     }
 

app/styles/footer.scss

@@ -54,7 +54,7 @@ footer {
     font-style: italic;
   }
 
-  @media only screen and (min-width: $small-device-break) {
+  @media only screen and (min-width: $medium-device-break) {
     border-width: 0 1px;
     border-style: solid;
     border-color: $gray-extralight;

app/styles/pages/dashboard-index.scss

@@ -10,11 +10,5 @@
   .bulletin-actions {
     width: 150px;
   }
-
-  @media only screen and (min-width: $small-device-break) {
-  }
-
-  @media only screen and (min-width: $medium-device-break) {
-  }
 }
 

app/styles/pages/group-index.scss

@@ -41,7 +41,7 @@
     border-color: $gray-extralight;
 
     .about-group {
-      font-size: 12px;
+      font-size: 13px;
     }
 
     .latest-news > div {

app/styles/pages/not-found.scss

@@ -2,12 +2,4 @@
   color: $gray;
   padding-bottom: $padding-xl;
   padding-top: $padding-xl;
-
-  @media only screen and
-    (min-width: $small-device-break) and
-    (max-width: $medium-device-break) {
-  }
-
-  @media only screen and (min-width: $medium-device-break) {
-  }
 }

app/styles/utils.scss

@@ -59,63 +59,63 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 @mixin margin-top-xl() {
   margin-top: $padding-l;
 
-  @media only screen and (min-width: $medium-device-break) {
+  @media only screen and (min-width: $large-device-break) {
     margin-top: $padding-xl;
   }
 }
 
 @mixin margin-top-l() {
   margin-top: $padding-m;
 
-  @media only screen and (min-width: $medium-device-break) {
+  @media only screen and (min-width: $large-device-break) {
     margin-top: $padding-l;
   }
 }
 
 @mixin padding-top-xl() {
   padding-top: $padding-l;
 
-  @media only screen and (min-width: $medium-device-break) {
+  @media only screen and (min-width: $large-device-break) {
     padding-top: $padding-xl;
   }
 }
 
 @mixin padding-bottom-xl() {
   padding-bottom: $padding-l;
 
-  @media only screen and (min-width: $medium-device-break) {
+  @media only screen and (min-width: $large-device-break) {
     padding-bottom: $padding-xl;
   }
 }
 
 @mixin padding-top-l() {
   padding-top: $padding-m;
 
-  @media only screen and (min-width: $medium-device-break) {
+  @media only screen and (min-width: $large-device-break) {
     padding-top: $padding-l;
   }
 }
 
 @mixin padding-top-m() {
   padding-top: $padding-s;
 
-  @media only screen and (min-width: $medium-device-break) {
+  @media only screen and (min-width: $large-device-break) {
     padding-top: $padding-m;
   }
 }
 
 @mixin padding-bottom-l() {
   padding-bottom: $padding-m;
 
-  @media only screen and (min-width: $medium-device-break) {
+  @media only screen and (min-width: $large-device-break) {
     padding-bottom: $padding-l;
   }
 }
 
 @mixin padding-bottom-m() {
   padding-bottom: $padding-s;
 
-  @media only screen and (min-width: $medium-device-break) {
+  @media only screen and (min-width: $large-device-break) {
     padding-bottom: $padding-m;
   }
 }