diff --git a/.stylelintignore b/.stylelintignore
index e35dcf12efe4..d30a987fcd4a 100644
--- a/.stylelintignore
+++ b/.stylelintignore
@@ -1,4 +1,5 @@
 common/lib/xmodule/xmodule/css
 common/static/sass/bourbon
 common/static/xmodule/modules/css
+common/test/test-theme
 lms/static/sass/vendor
diff --git a/cms/static/sass/views/_certificates.scss b/cms/static/sass/views/_certificates.scss
index 6ae672652cec..124840a7af15 100644
--- a/cms/static/sass/views/_certificates.scss
+++ b/cms/static/sass/views/_certificates.scss
@@ -11,7 +11,8 @@
 // * +Layout - Certificates
 // ====================
 .view-certificates {
-  .content-primary, .content-supplementary {
+  .content-primary,
+  .content-supplementary {
     @include box-sizing(border-box);
 
     float: left;
@@ -66,10 +67,11 @@
     width: flex-grid(3, 12);
   }
 
-  .certificate-info-section{
+  .certificate-info-section {
     overflow: auto;
 
-    .course-title-section, .course-number-section{
+    .course-title-section,
+    .course-number-section {
       min-width: 47%;
 
       @include margin-right(2%);
@@ -150,7 +152,7 @@
 
     .collection-details {
       .actions {
-        @include transition(opacity .15s .25s ease-in-out);
+        @include transition(opacity 0.15s 0.25s ease-in-out);
 
         position: absolute;
         top: $baseline;
@@ -285,7 +287,9 @@
           }
         }
 
-        label, input, textarea {
+        label,
+        input,
+        textarea {
           display: block;
         }
 
@@ -306,7 +310,8 @@
         }
 
         //this section is borrowed from _account.scss - we should clean up and unify later
-        input, textarea {
+        input,
+        textarea {
           @extend %t-copy-base;
 
           height: 100%;
@@ -491,7 +496,8 @@
 }
 
 .view-certificates .certificates {
-  .certificate-details, .certificate-edit {
+  .certificate-details,
+  .certificate-edit {
     .title {
       @extend %t-title4;
       @extend %t-strong;
@@ -563,7 +569,8 @@
 // ====================
 // TO-DO: refactor to use collection styling where possible.
 .view-certificates .certificates {
-  .signatory-details, .signatory-edit {
+  .signatory-details,
+  .signatory-edit {
     @extend %ui-window;
 
     border-color: $gray-l4;
@@ -595,7 +602,8 @@
     }
 
     .signatory-panel-edit {
-      float:right;
+      @include float(right);
+
       padding: 8px;
       position: inherit;
     }
@@ -604,9 +612,11 @@
   .signatory-edit {
 
     // TO-DO: remove icon styling, use save / cancel pattern for Studio
-    .signatory-panel-close, .signatory-panel-save, .signatory-panel-delete {
-      float:right;
-      padding:10px;
+    .signatory-panel-close,
+    .signatory-panel-save,
+    .signatory-panel-delete {
+      float: right;
+      padding: $baseline/2;
     }
 
     .tip {
@@ -637,7 +647,9 @@
         }
       }
 
-      label, input, textarea {
+      label,
+      input,
+      textarea {
         display: block;
       }
 
@@ -658,7 +670,8 @@
       }
 
       //TO-DO: this section is borrowed from _account.scss - we should clean up and unify later
-      input, textarea {
+      input,
+      textarea {
         @extend %t-copy-base;
 
         height: 100%;
@@ -705,7 +718,7 @@
           border-color: $red;
         }
 
-        .message-error{
+        .message-error {
           color: $red;
         }
       }
diff --git a/cms/static/sass/views/_container.scss b/cms/static/sass/views/_container.scss
index ae8c0efe9cb1..197453a7460d 100644
--- a/cms/static/sass/views/_container.scss
+++ b/cms/static/sass/views/_container.scss
@@ -427,7 +427,8 @@
           }
         }
 
-        &:hover, &:focus {
+        &:hover,
+        &:focus {
           background: $color-background-alternate;
         }
       }
diff --git a/cms/static/sass/views/_group-configuration.scss b/cms/static/sass/views/_group-configuration.scss
index ba89d4aa9834..d9bb1b81aab0 100644
--- a/cms/static/sass/views/_group-configuration.scss
+++ b/cms/static/sass/views/_group-configuration.scss
@@ -75,7 +75,8 @@
             display: inline-block;
             color: $black;
 
-            &:hover, &:focus {
+            &:hover,
+            &:focus {
               color: $blue;
             }
 
diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss
index ab5880b39be5..7a00555e09ed 100644
--- a/cms/static/sass/views/_outline.scss
+++ b/cms/static/sass/views/_outline.scss
@@ -48,7 +48,8 @@
     }
 
     // STATE: hover/focus
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       .incontext-editor-open-action {
         opacity: 1;
       }
diff --git a/common/lib/xmodule/xmodule/css/annotatable/display.scss b/common/lib/xmodule/xmodule/css/annotatable/display.scss
index 8a58c6b4291f..f35a16035639 100644
--- a/common/lib/xmodule/xmodule/css/annotatable/display.scss
+++ b/common/lib/xmodule/xmodule/css/annotatable/display.scss
@@ -12,12 +12,12 @@ $annotatable--body-font-size: em(14);
 }
 
 .annotatable-header {
-  margin-bottom: .5em;
+  margin-bottom: 0.5em;
 }
 
 .annotatable-section {
   position: relative;
-  padding: .5em 1em;
+  padding: 0.5em 1em;
   border: 1px solid $annotatable--border-color;
   border-radius: 0.5em;
   margin-bottom: 0.5em;
@@ -55,8 +55,8 @@ $annotatable--body-font-size: em(14);
   position: absolute;
   right: 0;
   margin: 2px 1em 2px 0;
-  &.expanded:after { content: " \2191" }
-  &.collapsed:after { content: " \2193" }
+  &.expanded::after { content: " \2191"; }
+  &.collapsed::after { content: " \2193"; }
 }
 
 .annotatable-span {
@@ -75,9 +75,9 @@ $annotatable--body-font-size: em(14);
     (purple rgba(115,9,178,0.3) rgba(115,9,178,0.9))) {
 
     $highlight_index: $highlight_index + 1;
-    $marker: nth($highlight,1);
-    $color: nth($highlight,2);
-    $selected_color: nth($highlight,3);
+    $marker: nth($highlight, 1);
+    $color: nth($highlight, 2);
+    $selected_color: nth($highlight, 3);
 
     @if $highlight_index == 1 {
       &.highlight {
@@ -177,7 +177,7 @@ $annotatable--body-font-size: em(14);
     }
   }
 
-  &:after {
+  &::after {
     content: '';
     display: inline-block;
     position: absolute;
diff --git a/common/lib/xmodule/xmodule/css/capa/display.scss b/common/lib/xmodule/xmodule/css/capa/display.scss
index 6b2e18187616..6f2373b05105 100644
--- a/common/lib/xmodule/xmodule/css/capa/display.scss
+++ b/common/lib/xmodule/xmodule/css/capa/display.scss
@@ -21,8 +21,8 @@
 
 // +Variables - Capa
 // ====================
-$annotation-yellow: rgba(255, 255,10, 0.3);
-$color-copy-tip: rgb(100,100,100);
+$annotation-yellow: rgba(255, 255, 10, 0.3);
+$color-copy-tip: rgb(100, 100, 100);
 
 // FontAwesome Icon code
 // ====================
@@ -45,9 +45,9 @@ $asterisk-icon: '\f069'; // .fa-asterisk
 
 // +Mixins - Status Icon - Capa
 // ====================
-@mixin status-icon($color: $gray, $fontAwesomeIcon: "\f00d"){
+@mixin status-icon($color: $gray, $fontAwesomeIcon: "\f00d") {
   .status-icon {
-    &:after {
+    &::after {
       @extend %use-font-awesome;
 
       color: $color;
@@ -219,7 +219,7 @@ div.problem {
     padding: ($baseline/2);
     width: 100%;
 
-    &:after {
+    &::after {
       @include margin-left($baseline*0.75);
     }
 
@@ -365,7 +365,7 @@ div.problem {
 div.problem {
   ol.enumerate {
     li {
-      &:before {
+      &::before {
         display: block;
         visibility: hidden;
         height: 0;
@@ -456,7 +456,7 @@ div.problem {
       margin-top: ($baseline / 2);
       margin-bottom: 0;
 
-      &:before {
+      &::before {
         @extend %t-strong;
 
         display: inline;
@@ -465,7 +465,7 @@ div.problem {
       }
 
       &:empty {
-        &:before {
+        &::before {
           display: none;
         }
       }
@@ -845,7 +845,7 @@ div.problem {
 
       .status {
         .status-icon {
-          &:after {
+          &::after {
             content: '';
           }
         }
@@ -871,11 +871,11 @@ div.problem {
     .indicator-container {
       display: inline-block;
 
-      .status.correct:after,
-      .status.partially-correct:after,
-      .status.incorrect:after,
-      .status.submitted:after,
-      .status.unanswered:after {
+      .status.correct::after,
+      .status.partially-correct::after,
+      .status.incorrect::after,
+      .status.submitted::after,
+      .status.unanswered::after {
         @include margin-left(0);
       }
     }
@@ -1485,7 +1485,7 @@ div.problem {
       font-weight: normal;
     }
 
-    a.annotation-return:after { content: " \2191" }
+    a.annotation-return::after { content: " \2191" }
 
     .block, ul.tags {
       margin: .5em 0;
@@ -1557,7 +1557,7 @@ div.problem {
 
       pre { background-color: $gray-l3; color: $black; }
 
-      &:before {
+      &::before {
         @extend %t-strong;
 
         display: block;
@@ -1603,7 +1603,7 @@ div.problem {
     }
 
     label.choicetextgroup_show_correct, section.choicetextgroup_show_correct {
-      &:after {
+      &::after {
         @include margin-left($baseline*0.75);
 
         content: url('#{$static-path}/images/correct-icon.png');
diff --git a/common/lib/xmodule/xmodule/css/html/display.scss b/common/lib/xmodule/xmodule/css/html/display.scss
index a7f5da906a30..d16c2e74978f 100644
--- a/common/lib/xmodule/xmodule/css/html/display.scss
+++ b/common/lib/xmodule/xmodule/css/html/display.scss
@@ -19,7 +19,10 @@ h2 {
   -webkit-font-smoothing: antialiased;
 }
 
-h3, h4, h5, h6 {
+h3,
+h4,
+h5,
+h6 {
   @include margin(0, 0, ($baseline/2), 0);
 
   font-weight: 600;
@@ -34,7 +37,7 @@ h4 {
 }
 
 h5 {
-  font-size: .83em;
+  font-size: 0.83em;
 }
 
 h6 {
@@ -48,7 +51,8 @@ p {
   color: $body-color;
 }
 
-em, i {
+em,
+i {
   font-style: italic;
 
   span {
@@ -56,7 +60,8 @@ em, i {
   }
 }
 
-strong, b {
+strong,
+b {
   font-weight: bold;
 
   span {
@@ -64,7 +69,9 @@ strong, b {
   }
 }
 
-p + p, ul + p, ol + p {
+p + p,
+ul + p,
+ol + p {
   margin-top: $baseline;
 }
 
@@ -72,7 +79,8 @@ blockquote {
   margin: 1em ($baseline*2);
 }
 
-ol, ul {
+ol,
+ul {
   // Using the lower level Bi App Sass mixin to avoid @padding conflicts with bourbon.
   @include bi-app-compact(padding, 0, 0, 0, 1em);
 
@@ -93,7 +101,11 @@ ul {
 }
 
 a {
-  &:link, &:visited, &:hover, &:active, &:focus {
+  &:link,
+  &:visited,
+  &:hover,
+  &:active,
+  &:focus {
     color: $blue;
   }
 }
@@ -124,7 +136,8 @@ table {
   border-collapse: collapse;
   font-size: 16px;
 
-  td, th {
+  td,
+  th {
     margin: $baseline 0;
     padding: ($baseline/2);
     border: 1px solid $gray-l3;
@@ -162,37 +175,37 @@ th {
     display: block;
     padding: ($baseline/4) 7px;
     border-radius: 5px;
-    opacity: .9;
+    opacity: 0.9;
     background: $white;
     color: $black;
     border: 2px solid $black;
-    
+
     .label {
       font-weight: bold;
     }
-    
+
     i {
       font-style: normal;
     }
   }
-  
+
   .image-link {
     @extend %ui-fake-link;
 
     position: relative;
     display: block;
-    
+
     .action-fullscreen {
       display: none;
       top: 10px;
       left: 10px;
     }
-    
+
     &:hover .action-fullscreen {
       display: block;
     }
   }
-  
+
   .image-modal {
     @extend %ui-fake-link;
     @extend %ui-depth5;
@@ -204,7 +217,7 @@ th {
     height: 100%;
     width: 100%;
     background-color: rgba(0, 0, 0, 0.7);
-  
+
     .image-content {
       position: relative;
       top: 2.5%;
@@ -213,10 +226,10 @@ th {
       width: 95%;
       margin: auto;
       overflow: hidden;
-      
+
       .image-wrapper {
         position: relative;
-        
+
         img {
           position: relative;
           display: block;
@@ -226,12 +239,12 @@ th {
           cursor: default;
         }
       }
-      
+
       .action-close {
         top: 10px;
         right: 10px;
       }
-      
+
       .image-controls {
         position: absolute;
         right: 10px;
@@ -239,16 +252,16 @@ th {
         margin: 0;
         padding: 0;
         list-style: none;
-          
+
         .image-control {
           position: relative;
           display: inline-block;
           margin: 0;
           padding: 0;
-          
+
           .modal-ui-icon {
             position: relative;
-            
+
             &.action-zoom-in {
               margin-right: ($baseline/4);
             }
@@ -265,17 +278,17 @@ th {
         }
       }
     }
-    
+
     &.image-is-fit-to-screen {
       display: block;
-      
+
       // !important used here to override jQuery.
       .image-content .image-wrapper {
         top: 0 !important;
         left: 0 !important;
         width: 100% !important;
         height: 100% !important;
-        
+
         img {
           top: 0 !important;
           left: 0 !important;
@@ -285,7 +298,7 @@ th {
 
     &.image-is-zoomed {
       display: block;
-      
+
       .image-content .image-wrapper {
         img {
           max-width: none;
diff --git a/common/lib/xmodule/xmodule/css/poll/display.scss b/common/lib/xmodule/xmodule/css/poll/display.scss
index fd15f8c49dd7..cf46fcf3bf4d 100644
--- a/common/lib/xmodule/xmodule/css/poll/display.scss
+++ b/common/lib/xmodule/xmodule/css/poll/display.scss
@@ -179,7 +179,7 @@ div.poll_question {
 
         .percent {
           background-color: gray;
-          width: 0px;
+          width: 0;
           height: 20px;
 
           &.short { }
@@ -202,16 +202,16 @@ div.poll_question {
   }
 
   .poll_answer.answered {
-    -webkit-box-shadow: rgb(97, 184, 225) 0px 1px 0px 0px inset;
+    -webkit-box-shadow: rgb(97, 184, 225) 0 1px 0 0 inset;
     background-color: rgb(29, 157, 217);
     background-image: -webkit-linear-gradient(top, rgb(29, 157, 217), rgb(14, 124, 176));
     border-bottom-color: rgb(13, 114, 162);
     border-left-color: rgb(13, 114, 162);
     border-right-color: rgb(13, 114, 162);
     border-top-color: rgb(13, 114, 162);
-    box-shadow: rgb(97, 184, 225) 0px 1px 0px 0px inset;
+    box-shadow: rgb(97, 184, 225) 0 1px 0 0 inset;
     color: rgb(255, 255, 255);
-    text-shadow: rgb(7, 103, 148) 0px 1px 0px;
+    text-shadow: rgb(7, 103, 148) 0 1px 0;
   }
 
   .button.reset-button {
diff --git a/common/lib/xmodule/xmodule/css/problem/edit.scss b/common/lib/xmodule/xmodule/css/problem/edit.scss
index 74b518ac5a34..e0a43c5fb2e9 100644
--- a/common/lib/xmodule/xmodule/css/problem/edit.scss
+++ b/common/lib/xmodule/xmodule/css/problem/edit.scss
@@ -51,7 +51,7 @@
   background-color: $white;
   overflow: hidden;
 
-  @include transition(width .3s linear 0s);
+  @include transition(width 0.3s linear 0s);
 
   &.shown {
     width: 20%;
@@ -108,7 +108,7 @@
 
 .problem-editor {
   // adding padding to simple editor only - adjacent selector is needed since there are no toggles for CodeMirror
-  .markdown-box+.CodeMirror {
+  .markdown-box + .CodeMirror {
     padding: 10px;
   }
 }
diff --git a/common/lib/xmodule/xmodule/css/sequence/display.scss b/common/lib/xmodule/xmodule/css/sequence/display.scss
index 4448001ed358..2d2712eff722 100644
--- a/common/lib/xmodule/xmodule/css/sequence/display.scss
+++ b/common/lib/xmodule/xmodule/css/sequence/display.scss
@@ -12,7 +12,8 @@ $seq-nav-height: 44px;
 
   display: block;
 
-  &:hover, &:focus {
+  &:hover,
+  &:focus {
     background: none;
   }
 }
@@ -32,14 +33,15 @@ $seq-nav-height: 44px;
 
       display: block;
 
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         background: none;
       }
     }
   }
 }
 
-%ui-clear-button  {
+%ui-clear-button {
   background-color: transparent;
   background-image: none;
   background-position: center 14px;
@@ -60,16 +62,13 @@ $seq-nav-height: 44px;
 .sequence-nav {
   @extend .topbar;
 
-  margin: 0 0 $baseline 0;
+  margin: 0 auto $baseline;
   position: relative;
   border-bottom: none;
   z-index: 0;
   height: $seq-nav-height;
   display: flex;
-
-  .sequence-nav-button {
-    max-width: 200px;
-  }
+  justify-content: center;
 
   @media print {
     display: none;
@@ -81,6 +80,11 @@ $seq-nav-height: 44px;
     position: relative;
     height: 100%;
     flex-grow: 1;
+
+    @include media-breakpoint-down(md) {
+      white-space: nowrap;
+      overflow-x: scroll;
+    }
   }
 
   ol {
@@ -88,7 +92,7 @@ $seq-nav-height: 44px;
 
     li {
       box-sizing: border-box;
-      min-width: 20px;
+      min-width: 40px;
       flex-grow: 1;
       border-color: $seq-nav-border-color;
       border-width: 1px;
@@ -127,28 +131,28 @@ $seq-nav-height: 44px;
 
         //video
         &.seq_video {
-          .icon:before {
+          .icon::before {
             content: "\f008"; // .fa-film
           }
         }
 
         //other
         &.seq_other {
-          .icon:before {
+          .icon::before {
             content: "\f02d"; // .fa-book
           }
         }
 
         //vertical
         &.seq_vertical {
-          .icon:before {
+          .icon::before {
             content: "\f00b";  // .fa-tasks
           }
         }
 
         //problems
         &.seq_problem {
-          .icon:before {
+          .icon::before {
             content: "\f044";  // .fa-pencil-square-o
           }
         }
@@ -207,38 +211,60 @@ $seq-nav-height: 44px;
 
   display: block;
   top: 0;
+  min-width: 40px;
+  max-width: 40px;
   height: 100%;
   text-shadow: none; // overrides default button text-shadow
   background: none;  // overrides default button gradient
-  background-color: white;
+  background-color: theme-color("inverse");
   border-color: $seq-nav-border-color;
   box-shadow: none;
-  min-width: 120px;
   font-size: inherit;
   font-weight: normal;
-  padding: 0 $baseline;
-  text-overflow: ellipsis;
+  padding: 0;
   white-space: nowrap;
-  overflow: hidden;
+  overflow-x: scroll;
+
+  @include media-breakpoint-up(md) {
+    min-width: 120px;
+    max-width: 200px;
+    text-overflow: ellipsis;
 
-  span:not(:last-child) {
-    @include padding-right($baseline / 2);
+    span:not(:last-child) {
+      @include padding-right($baseline / 2);
+    }
+  }
+
+  .sequence-nav-button-label {
+    display: none;
+
+    @include media-breakpoint-up(md) {
+      display: inline;
+    }
   }
 
   &.button-previous {
-    @include left(0);
-    @include border-top-left-radius(3px);
-    @include border-top-right-radius(0);
-    @include border-bottom-right-radius(0);
-    @include border-bottom-left-radius(3px);
+    order: -999;
+
+    @include media-breakpoint-up(md) {
+      @include left(0);
+      @include border-top-left-radius(3px);
+      @include border-top-right-radius(0);
+      @include border-bottom-right-radius(0);
+      @include border-bottom-left-radius(3px);
+    }
   }
 
   &.button-next {
-    @include right(0);
-    @include border-top-left-radius(0);
-    @include border-top-right-radius(3px);
-    @include border-bottom-right-radius(3px);
-    @include border-bottom-left-radius(0);
+    order: 999;
+
+    @include media-breakpoint-up(md) {
+      @include right(0);
+      @include border-top-left-radius(0);
+      @include border-top-right-radius(3px);
+      @include border-bottom-right-radius(3px);
+      @include border-bottom-left-radius(0);
+    }
   }
 
   &.disabled {
@@ -250,7 +276,7 @@ $seq-nav-height: 44px;
   display: none;
 }
 
-nav.sequence-bottom {
+.sequence-bottom {
   position: relative;
   height: 45px;
   margin: lh(2) auto;
@@ -259,6 +285,9 @@ nav.sequence-bottom {
 
   .sequence-nav-button {
     position: relative;
+    min-width: 120px;
+    max-width: 200px;
+    text-overflow: ellipsis;
 
     &:last-of-type {
       @include border-left(none);
diff --git a/common/lib/xmodule/xmodule/css/tabs/codemirror.scss b/common/lib/xmodule/xmodule/css/tabs/codemirror.scss
index 4db2b3386311..9678958b2bc7 100644
--- a/common/lib/xmodule/xmodule/css/tabs/codemirror.scss
+++ b/common/lib/xmodule/xmodule/css/tabs/codemirror.scss
@@ -1,4 +1,4 @@
-.editor{
+.editor {
   @include clearfix();
 
   .CodeMirror {
diff --git a/common/lib/xmodule/xmodule/css/tabs/tabs.scss b/common/lib/xmodule/xmodule/css/tabs/tabs.scss
index 20b71ce4b993..f49e65e2642d 100644
--- a/common/lib/xmodule/xmodule/css/tabs/tabs.scss
+++ b/common/lib/xmodule/xmodule/css/tabs/tabs.scss
@@ -1,7 +1,7 @@
 // styles duped from _unit.scss - Edit Header (Component Name, Mode-Editor, Mode-Settings)
 
 
-.tabs-wrapper{
+.tabs-wrapper {
   padding-top: 0;
   position: relative;
 
@@ -65,7 +65,7 @@
 
         a.tab {
           @include font-size(14);
-          @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
+          @include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
 
           border: 1px solid $blue-d1;
           border-radius: 3px;
@@ -83,7 +83,8 @@
             cursor: default;
           }
 
-          &:hover, &:focus {
+          &:hover,
+          &:focus {
             box-shadow: inset 0 1px 2px 1px  $shadow;
             background-image: linear-gradient(#009fe6, #009fe6) !important;
           }
@@ -106,7 +107,7 @@
     .comp-subtitles-import-list {
       > li {
         display: block;
-        margin: $baseline/2 0px $baseline/2 0;
+        margin: $baseline/2 0;
       }
 
       .blue-button {
@@ -118,8 +119,6 @@
       }
     }
   }
-
-
 }
 
 .component-tab {
diff --git a/common/lib/xmodule/xmodule/css/video/accessible_menu.scss b/common/lib/xmodule/xmodule/css/video/accessible_menu.scss
index 8df40efdb651..c9b56604c994 100644
--- a/common/lib/xmodule/xmodule/css/video/accessible_menu.scss
+++ b/common/lib/xmodule/xmodule/css/video/accessible_menu.scss
@@ -1,9 +1,9 @@
 $a11y--gray: rgb(127, 127, 127);
 $a11y--blue: rgb(0, 159, 230);
-$a11y--gray-d1: shade($gray,20%);
-$a11y--gray-l2: tint($gray,40%);
-$a11y--gray-l3: tint($gray,60%);
-$a11y--blue-s1: saturate($blue,15%);
+$a11y--gray-d1: shade($gray, 20%);
+$a11y--gray-l2: tint($gray, 40%);
+$a11y--gray-l3: tint($gray, 60%);
+$a11y--blue-s1: saturate($blue, 15%);
 
 %use-font-awesome {
   font-family: FontAwesome;
@@ -50,12 +50,13 @@ $a11y--blue-s1: saturate($blue,15%);
         font-size: 14px;
         line-height: 23px;
 
-        &:hover, &:focus {
+        &:hover,
+        &:focus {
           color: $a11y--gray-d1;
         }
       }
 
-      &.active{
+      &.active {
         a {
           color: $a11y--blue;
         }
@@ -84,11 +85,10 @@ $a11y--blue-s1: saturate($blue,15%);
         background-color: $action-primary-active-bg;
         color: $very-light-text;
 
-        &:after {
+        &::after {
           color: $very-light-text;
         }
       }
-
     }
 
     > a {
@@ -106,7 +106,7 @@ $a11y--blue-s1: saturate($blue,15%);
       overflow: hidden;
       text-overflow: ellipsis;
 
-      &:after {
+      &::after {
         @extend %use-font-awesome;
 
         content: "\f0d7";
@@ -137,7 +137,8 @@ $a11y--blue-s1: saturate($blue,15%);
 }
 
 
-.contextmenu, .submenu {
+.contextmenu,
+.submenu {
   @extend %ui-depth5;
 
   border: 1px solid #333;
@@ -157,7 +158,8 @@ $a11y--blue-s1: saturate($blue,15%);
     display: block;
   }
 
-  .menu-item, .submenu-item {
+  .menu-item,
+  .submenu-item {
     border-top: 1px solid $gray-l3;
     padding: ($baseline/4) ($baseline/2);
     outline: none;
@@ -184,7 +186,7 @@ $a11y--blue-s1: saturate($blue,15%);
     position: relative;
     padding: ($baseline/4) $baseline ($baseline/4) ($baseline/2);
 
-    &:after {
+    &::after {
       content: '\25B6';
       position: absolute;
       right: 5px;
diff --git a/common/lib/xmodule/xmodule/css/video/display.scss b/common/lib/xmodule/xmodule/css/video/display.scss
index bd6ed2fa4fab..14324477097e 100644
--- a/common/lib/xmodule/xmodule/css/video/display.scss
+++ b/common/lib/xmodule/xmodule/css/video/display.scss
@@ -57,7 +57,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
     .video-player {
       position: relative;
 
-      &:before {
+      &::before {
         display: block;
         content: "";
         width: 100%;
@@ -75,16 +75,18 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
   .focus_grabber {
     position: relative;
     display: inline;
-    width: 0px;
-    height: 0px;
+    width: 0;
+    height: 0;
   }
 
   .downloads-heading {
-    margin: 1em 0 0 0;
+    margin: 1em 0 0;
   }
 
   .wrapper-downloads {
-    display: flex;
+    @include media-breakpoint-up(md) {
+      display: flex;
+    }
 
     .hd {
       margin: 0;
@@ -154,8 +156,8 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
         color: theme-color("primary");
       }
 
-      .btn-play:after {
-        background: $white;
+      .btn-play::after {
+        background: theme-color("inverse");
       }
     }
 
@@ -176,7 +178,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
       padding: 30px;
       border-radius: 25%;
 
-      &:after{
+      &::after {
         @include animation(rotateCW 3s infinite linear);
 
         content: '';
@@ -200,7 +202,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
       font-size: 4em;
       cursor: pointer;
 
-      &:after {
+      &::after {
         background: $white;
         position: absolute;
         width: 50%;
@@ -229,17 +231,17 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
       max-height: ($baseline * 3);
       border-radius: ($baseline / 5);
       padding: 8px ($baseline / 2) 8px ($baseline * 1.5);
-      background: rgba(0, 0, 0, .75);
+      background: rgba(0, 0, 0, 0.75);
       color: $yellow;
 
-      &:before {
+      &::before {
         position: absolute;
         display: inline-block;
         top: 50%;
 
         @include left($baseline);
 
-        margin-top: -.6em;
+        margin-top: -0.6em;
         font-family: 'FontAwesome';
         content: "\f142";
         color: $white;
@@ -248,11 +250,11 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
       &:hover,
       &.is-dragging {
-        background: rgba(0, 0, 0, 1.0);
+        background: rgba(0, 0, 0, 1);
         cursor: move;
 
-        &:before {
-          opacity: 1.0;
+        &::before {
+          opacity: 1;
         }
       }
     }
@@ -269,7 +271,8 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
         }
       }
 
-      .video-error, .video-hls-error {
+      .video-error,
+      .video-hls-error {
         padding: ($baseline / 5);
         background: black;
         color: white !important; // the pattern library headings shim is more scoped
@@ -355,7 +358,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
       .slider {
         @include clearfix();
         @include transform-origin(bottom left);
-        @include transition(height .7s ease-in-out 0s);
+        @include transition(height 0.7s ease-in-out 0s);
 
         box-sizing: border-box;
         position: absolute;
@@ -386,7 +389,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
           @extend %ui-fake-link;
 
           @include transform-origin(bottom left);
-          @include transition(all .7s ease-in-out 0s);
+          @include transition(all 0.7s ease-in-out 0s);
 
           box-sizing: border-box;
           top: -1px;
@@ -436,13 +439,13 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
           @extend %t-strong;
           @extend %t-title7;
 
-          @include padding-left(lh(.75));
+          @include padding-left(lh(0.75));
 
           display: inline-block;
           color: rgb(207, 216, 220); // UXPL grayscale-cool light
-          -webkit-font-smoothing: antialiased;;
+          -webkit-font-smoothing: antialiased;
 
-          @media            (max-width: 1120px) {
+          @media (max-width: 1120px) {
             @include padding-left(lh(0.5));
           }
         }
@@ -801,7 +804,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
   &.closed {
     .video-wrapper {
-      width: flex-grid(9,9);
+      width: flex-grid(9, 9);
       background-color: inherit;
     }
 
@@ -846,7 +849,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
   &.video-fullscreen {
     @extend %ui-depth4;
 
-    background: rgba(#000, .95);
+    background: rgba(#000, 0.95);
     border: 0;
     bottom: 0;
     height: 100%;
@@ -899,7 +902,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
         object,
         iframe,
-        video{
+        video {
           position: absolute;
           width: auto;
           height: auto;
@@ -974,7 +977,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
       background: $black-t2;
       box-shadow: none;
 
-      &:after {
+      &::after {
         // the button class, ties to functionality, also uses an icon font
         // we're overriding it here so we can use our image instead
         display: none;
diff --git a/common/static/sass/_mixins-inherited.scss b/common/static/sass/_mixins-inherited.scss
index 2cd667eefd15..f2055eb61fc1 100644
--- a/common/static/sass/_mixins-inherited.scss
+++ b/common/static/sass/_mixins-inherited.scss
@@ -141,7 +141,8 @@
   display: inline-block;
   padding: ($baseline/5) $baseline ($baseline/4);
 
-  &.disabled, &.is-disabled {
+  &.disabled,
+  &.is-disabled {
     border: 1px solid $gray-l1 !important;
     border-radius: 3px !important;
     background: $gray-l1 !important;
@@ -149,12 +150,15 @@
     pointer-events: none;
     cursor: none;
 
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       box-shadow: 0 0 0 0 !important;
     }
   }
 
-  &:hover, &:focus, &:active {
+  &:hover,
+  &:focus,
+  &:active {
     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 1px rgba(0, 0, 0, 0.15);
   }
 }
diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss
index 0e0b3707b04d..0e2813edc4c4 100644
--- a/common/static/sass/_mixins.scss
+++ b/common/static/sass/_mixins.scss
@@ -28,14 +28,14 @@
 
 // +Font Sizing - Mixin
 // ====================
-@mixin font-size($sizeValue: 16){
+@mixin font-size($sizeValue: 16) {
   font-size: $sizeValue + px;
   font-size: ($sizeValue/10) + rem;
 }
 
 // +Line Height - Mixin
 // ====================
-@mixin line-height($fontSize: auto){
+@mixin line-height($fontSize: auto) {
   line-height: ($fontSize*1.48) + px;
   line-height: (($fontSize/10)*1.48) + rem;
 }
@@ -120,14 +120,14 @@
 }
 
 // layout placeholders
-.ui-col-wide  {
+.ui-col-wide {
   width: flex-grid(9, 12);
 
   @include margin-right(flex-gutter());
   @include float(left);
 }
 
-.ui-col-narrow  {
+.ui-col-narrow {
   width: flex-grid(3, 12);
 
   @include float(left);
@@ -145,7 +145,8 @@
   background: $white;
 
   // STATE: hover/active
-  &:hover, &:active {
+  &:hover,
+  &:active {
     box-shadow: 0 1px 1px $shadow;
   }
 }
@@ -203,11 +204,9 @@
   display: inline-block;
   cursor: pointer;
 
-  &:hover, &:active {
-
-  }
-
-  &.disabled, &[disabled], &.is-disabled {
+  &.disabled,
+  &[disabled],
+  &.is-disabled {
     cursor: default;
     pointer-events: none;
     border: 1px solid $gray-l3;
@@ -237,21 +236,26 @@
   @extend %ui-btn-pill;
   @extend %t-strong;
 
-  padding:($baseline/2) $baseline;
+  padding: ($baseline/2) $baseline;
   border-width: 1px;
   border-style: solid;
   box-shadow: none;
   line-height: 1.5em;
   text-align: center;
 
-  &:hover, &:active, &:focus {
+  &:hover,
+  &:active,
+  &:focus {
     box-shadow: 0 2px 1px $shadow;
   }
 
-  &.current, &.active {
+  &.current,
+  &.active {
     box-shadow: inset 1px 1px 2px $shadow-d1;
 
-    &:hover, &:active, &:focus {
+    &:hover,
+    &:active,
+    &:focus {
       box-shadow: inset 1px 1px 1px $shadow-d1;
     }
   }
@@ -264,14 +268,14 @@
 
   border-width: 1px;
   border-style: solid;
-  padding:($baseline/2) $baseline;
+  padding: ($baseline/2) $baseline;
   background: transparent;
   line-height: 1.5em;
   text-align: center;
 }
 
 %ui-btn-flat-outline {
-  @include transition(all .15s);
+  @include transition(all 0.15s);
 
   @extend %t-strong;
   @extend %t-action4;
@@ -283,14 +287,15 @@
   background-color: theme-color("inverse");
   color: theme-color("primary");
 
-  &:hover, &:focus {
+  &:hover,
+  &:focus {
     border: 1px solid $uxpl-blue-hover-active;
     background-color: $uxpl-blue-hover-active;
     color: theme-color("inverse");
   }
 
   &.is-disabled,
-  &[disabled="disabled"]{
+  &[disabled="disabled"] {
     border: 1px solid $gray-l2;
     background-color: $gray-l4;
     color: $gray-l2;
@@ -300,7 +305,7 @@
 
 // button with no button shell until hover for understated actions
 %ui-btn-non {
-  @include transition(all .15s);
+  @include transition(all 0.15s);
 
   @extend %ui-btn-pill;
 
@@ -313,7 +318,8 @@
   background: none;
   color: $gray-l1;
 
-  &:hover, &:focus {
+  &:hover,
+  &:focus {
     background-color: $gray-l1;
     color: $white;
   }
@@ -323,7 +329,8 @@
 %ui-btn-non-blue {
   @extend %ui-btn-non;
 
-  &:hover, &:focus {
+  &:hover,
+  &:focus {
     background-color: theme-color("primary");
     color: theme-color("inverse");
   }
@@ -363,7 +370,7 @@
   @extend %ui-well;
   @extend %t-copy-base;
 
-  opacity: .6;
+  opacity: 0.6;
   background-color: $white;
   padding: ($baseline*1.5) $baseline;
   text-align: center;
diff --git a/common/static/sass/bourbon/addons/_button.scss b/common/static/sass/bourbon/addons/_button.scss
index 14a89e480c15..3a8279f995e5 100644
--- a/common/static/sass/bourbon/addons/_button.scss
+++ b/common/static/sass/bourbon/addons/_button.scss
@@ -349,7 +349,7 @@
   text-decoration: none;
   background-clip: padding-box;
 
-  &:hover:not(:disabled){
+  &:hover:not(:disabled) {
     $base-color-hover:    adjust-color($base-color, $saturation: 4%, $lightness: 5%);
 
     @if $grayscale == true {
diff --git a/common/static/sass/bourbon/functions/_tint-shade.scss b/common/static/sass/bourbon/functions/_tint-shade.scss
index f7172004ac63..d1198d036735 100644
--- a/common/static/sass/bourbon/functions/_tint-shade.scss
+++ b/common/static/sass/bourbon/functions/_tint-shade.scss
@@ -1,9 +1,9 @@
 // Add percentage of white to a color
-@function tint($color, $percent){
+@function tint($color, $percent) {
   @return mix(white, $color, $percent);
 }
 
 // Add percentage of black to a color
-@function shade($color, $percent){
+@function shade($color, $percent) {
   @return mix(black, $color, $percent);
 }
diff --git a/common/static/sass/edx-pattern-library-shims/_breadcrumbs.scss b/common/static/sass/edx-pattern-library-shims/_breadcrumbs.scss
index 8f12ea7b9f82..b21ebb9b0b5c 100644
--- a/common/static/sass/edx-pattern-library-shims/_breadcrumbs.scss
+++ b/common/static/sass/edx-pattern-library-shims/_breadcrumbs.scss
@@ -12,6 +12,17 @@
 
     display: inline-block;
 
+    @include media-breakpoint-down(md) {
+      max-width: 60px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    &.nav-item-course {
+      max-width: none;
+    }
+
     a,
     a:visited {
       color: theme-color("primary");
@@ -25,6 +36,11 @@
   .fa-angle-right {
     @include margin-left($baseline/4);
 
+    @include media-breakpoint-down(md) {
+      position: relative;
+      top: -5px;
+    }
+
     display: inline-block;
     color: $body-color;
 
diff --git a/lms/static/sass/_experiments.scss b/lms/static/sass/_experiments.scss
index 543178e36bb9..e63167ded87f 100644
--- a/lms/static/sass/_experiments.scss
+++ b/lms/static/sass/_experiments.scss
@@ -141,7 +141,8 @@
   font-size: 14px !important;
   font-weight: 500 !important;
 
-  &:hover, &:focus {
+  &:hover,
+  &:focus {
     background-color: #009b00 !important;
     border-color: #009b00;
     box-shadow: #004d00 0 2px 1px 0;
diff --git a/lms/static/sass/_variables.scss b/lms/static/sass/_variables.scss
index 6b736b410520..2f3b04240dee 100644
--- a/lms/static/sass/_variables.scss
+++ b/lms/static/sass/_variables.scss
@@ -1,5 +1,7 @@
 // LMS-specific variables
 
+$text-width-readability-max: 900px;
+
 // LMS-only colors
 $audit-mode-color: rgb(74, 74, 74) !default;
 $honor-mode-color: theme-color("primary") !default;
diff --git a/lms/static/sass/base/_base.scss b/lms/static/sass/base/_base.scss
index 8ab416601c08..5f7bc6458732 100644
--- a/lms/static/sass/base/_base.scss
+++ b/lms/static/sass/base/_base.scss
@@ -130,9 +130,13 @@ a:visited:not(.btn) {
 }
 
 .content-wrapper {
-  width: flex-grid(12);
-  margin: 0 auto;
-  background: $body-bg;
+  max-width: map-get($container-max-widths, xl);
+  margin-top: $baseline;
+  padding: 0 0 $baseline/2;
+
+  @include media-breakpoint-up(md) {
+    padding: 0 $baseline $baseline/2;
+  }
 
   @media print {
     padding-bottom: 0;
diff --git a/lms/static/sass/base/_layouts.scss b/lms/static/sass/base/_layouts.scss
index 95f6d8bdafdf..c9ee599de78a 100644
--- a/lms/static/sass/base/_layouts.scss
+++ b/lms/static/sass/base/_layouts.scss
@@ -6,11 +6,6 @@
 body.view-in-course {
   background-color: $body-bg;
 
-  // keep application of widths to window-wrap
-  .window-wrap {
-    min-width: 760px;
-  }
-
   // courseware header
   .header-global,
   .header-global.slim {
@@ -19,7 +14,8 @@ body.view-in-course {
     .wrapper-header {
       min-width: auto;
 
-      .user-dropdown, .dropdown {
+      .user-dropdown,
+      .dropdown {
         padding: ($baseline/2);
       }
     }
@@ -41,7 +37,7 @@ body.view-in-course {
   }
 
   .wrapper-course-material .course-material {
-    padding: ($baseline/2) 0 0 0;
+    padding: 0;
   }
 
   .wrapper-course-material .course-material .course-tabs {
@@ -53,7 +49,6 @@ body.view-in-course {
     max-width: none;
     min-width: initial;
     width: auto;
-    padding: 0 2%;
   }
 
   // course info page
diff --git a/lms/static/sass/base/_mixins.scss b/lms/static/sass/base/_mixins.scss
index dadc9db13a1b..fa9e5b6c9764 100644
--- a/lms/static/sass/base/_mixins.scss
+++ b/lms/static/sass/base/_mixins.scss
@@ -2,13 +2,13 @@
 // ====================
 
 // mixins - font sizing
-@mixin font-size($sizeValue: 16){
+@mixin font-size($sizeValue: 16) {
   font-size: $sizeValue + px;
   // font-size: ($sizeValue/10) + rem;
 }
 
 // mixins - line height
-@mixin line-height($fontSize: auto){
+@mixin line-height($fontSize: auto) {
   line-height: ($fontSize*1.48) + px;
   // line-height: (($fontSize/10)*1.48) + rem;
 }
@@ -31,7 +31,7 @@
 }
 
 // sunsetted, but still used mixins
-@mixin hide-text(){
+@mixin hide-text() {
   text-indent: -9999px;
   overflow: hidden;
   display: block;
diff --git a/lms/static/sass/bootstrap/_layouts.scss b/lms/static/sass/bootstrap/_layouts.scss
index ef10235e74e9..4263e0326dae 100644
--- a/lms/static/sass/bootstrap/_layouts.scss
+++ b/lms/static/sass/bootstrap/_layouts.scss
@@ -1,13 +1,29 @@
 // LMS layouts
 
 .content-wrapper {
+  max-width: map-get($container-max-widths, xl);
   margin-top: $baseline;
-  padding-bottom: $baseline/2;
+  padding: 0 0 $baseline/2;
+
+  @include media-breakpoint-up(md) {
+    padding: 0 $baseline $baseline/2;
+  }
 
   .course-tabs {
-    padding: 0 $baseline*2;
+    padding: 0;
     font-size: $font-size-sm;
 
+    @include media-breakpoint-down(md) {
+      overflow-x: scroll;
+      overflow-y: hidden;
+      white-space: nowrap;
+    }
+
+    .navbar-nav {
+      display: flex;
+      flex-direction: row;
+    }
+
     .nav-item {
       .nav-link {
         padding: $baseline/2 $baseline*3/4 $baseline*13/20;
@@ -15,12 +31,6 @@
         border-width: 0 0 $baseline/5 0;
         border-bottom-color: transparent;
         color: theme-color("secondary");
-
-        @include media-breakpoint-down(md) {
-          border: none;
-          text-align: left;
-          padding: 0 0 $baseline/2 0;
-        }
       }
 
       &.active,
diff --git a/lms/static/sass/course/_info.scss b/lms/static/sass/course/_info.scss
index 7f0d2032a2ff..65945e38960d 100644
--- a/lms/static/sass/course/_info.scss
+++ b/lms/static/sass/course/_info.scss
@@ -1,8 +1,8 @@
 //// Notifications
 // Upgrade
 
-$notification-highlight-border-color:      $uxpl-green-base !default;
-$notification-background:                  rgb(255, 255, 255) !default
+$notification-highlight-border-color: $uxpl-green-base !default;
+$notification-background: rgb(255, 255, 255) !default
 
 .home {
   @include clearfix();
@@ -60,7 +60,7 @@ div.info-wrapper {
 
     div.upgrade-banner {
       // This banner uses the Pattern Library's defined variables
-      @include border-left(0px);
+      @include border-left(0);
 
       border: 1px solid $border-color;
       width: 100%;
diff --git a/lms/static/sass/course/base/_extends.scss b/lms/static/sass/course/base/_extends.scss
index 8255532cd829..2284e7423dc8 100644
--- a/lms/static/sass/course/base/_extends.scss
+++ b/lms/static/sass/course/base/_extends.scss
@@ -23,12 +23,14 @@ h1.top-header {
   text-transform: none;
   letter-spacing: 0;
 
-  &:hover, &:focus {
+  &:hover,
+  &:focus {
     text-decoration: none;
   }
 }
 
-.light-button, a.light-button, // only used in askbot as classes
+.light-button,
+a.light-button, // only used in askbot as classes
 .gray-button {
   @include simple($gray-l5);
 
@@ -130,9 +132,10 @@ h1.top-header {
         line-height: lh();
         font-size: 1em;
         box-sizing: border-box;
-        padding: lh(.25) lh(0.5) lh(.25) 0;
+        padding: lh(0.25) lh(0.5) lh(0.25) 0;
 
-        &:hover, &:focus {
+        &:hover,
+        &:focus {
           color: #666;
           background: $gray-l6;
         }
@@ -156,7 +159,8 @@ h1.top-header {
       width: 16px;
       z-index: 99;
 
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         background-color: white;
       }
     }
@@ -181,7 +185,8 @@ h1.top-header {
       border-left: 1px solid lighten($border-color, 10%);
       display: block;
 
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         background: none;
       }
     }
diff --git a/lms/static/sass/course/base/_mixins.scss b/lms/static/sass/course/base/_mixins.scss
index b53f05462d34..e821e3c86e2e 100644
--- a/lms/static/sass/course/base/_mixins.scss
+++ b/lms/static/sass/course/base/_mixins.scss
@@ -15,7 +15,8 @@
   text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
 
-  &:hover, &:focus {
+  &:hover,
+  &:focus {
     border-color: #297095;
 
     @include linear-gradient(top, #4fbbe4, #2090d0);
@@ -38,7 +39,8 @@
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
 
-  &:hover, &:focus {
+  &:hover,
+  &:focus {
     @include linear-gradient(top, #fff, #ddd);
   }
 }
@@ -57,7 +59,8 @@
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
 
-  &:hover, &:focus {
+  &:hover,
+  &:focus {
     background: -webkit-linear-gradient(top, #888, #666);
   }
 }
diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss
index a7da70c8c24c..683249ead36a 100644
--- a/lms/static/sass/course/courseware/_courseware.scss
+++ b/lms/static/sass/course/courseware/_courseware.scss
@@ -19,6 +19,11 @@ html.video-fullscreen {
   @extend %ui-print-excluded;
 
   margin: ($baseline/2) ($baseline/4) 0 0;
+  display: none;
+
+  @include media-breakpoint-up(md) {
+    display: block;
+  }
 
   &.studio-view {
     margin: 0;
@@ -100,7 +105,6 @@ html.video-fullscreen {
   }
 }
 
-// TO-DO should this be content wrapper?
 .course-wrapper {
   position: relative;
 
@@ -132,6 +136,12 @@ html.video-fullscreen {
       word-break: break-word;
     }
 
+    // Make text-focused blocks have a maximum width for readability.
+    .xmodule_HtmlModule,
+    .xmodule_CapaModule {
+      max-width: $text-width-readability-max;
+    }
+
     h1 {
       margin: 0 0 lh();
       letter-spacing: 0;
diff --git a/lms/static/sass/course/instructor/_instructor_2.scss b/lms/static/sass/course/instructor/_instructor_2.scss
index c60f51a565bb..538355d6f91a 100644
--- a/lms/static/sass/course/instructor/_instructor_2.scss
+++ b/lms/static/sass/course/instructor/_instructor_2.scss
@@ -78,7 +78,7 @@
   // TYPE: warning
   .msg-warning {
     display: none;
-    background: tint($warning-color,95%);
+    background: tint($warning-color, 95%);
     border-top: 2px solid $warning-color;
     color: $warning-color;
   }
@@ -203,7 +203,7 @@
         height: 24px; // To match bull browse button
         width: 124%;
         margin: 0;
-        padding: 4px 0 0 0;
+        padding: 4px 0 0;
         cursor: pointer;
 
         // for visual sync, need to make button similar to firefox
@@ -376,7 +376,7 @@
   // type - warning
   .message-warning {
     border-top: 2px solid $warning-color;
-    background: tint($warning-color,95%);
+    background: tint($warning-color, 95%);
 
     .message-title {
       color: $warning-color;
@@ -571,7 +571,7 @@
         @include columns(2);
 
         .subheading {
-          font-size: .9em;
+          font-size: 0.9em;
         }
       }
 
@@ -608,7 +608,8 @@
     }
   }
 
-  .batch-enrollment, .batch-beta-testers {
+  .batch-enrollment,
+  .batch-beta-testers {
     textarea {
       margin-top: 0.2em;
       height: auto;
@@ -637,10 +638,6 @@
   }
   // Auto Enroll Csv Section
   .auto_enroll_csv {
-    .results {
-
-    }
-
     .enrollment_signup_button {
       @include margin-right($baseline/4);
     }
@@ -867,7 +864,8 @@
       }
     }
 
-    .form-submit, .form-cancel {
+    .form-submit,
+    .form-cancel {
       display: inline-block;
       vertical-align: middle;
     }
@@ -919,7 +917,7 @@
       }
 
       .action-create {
-        opacity: 0.50;
+        opacity: 0.5;
       }
     }
   }
@@ -979,7 +977,9 @@
       padding-bottom: ($baseline/2);
       border-bottom: 1px solid $gray-l4;
 
-      &:hover, &:active, &:focus {
+      &:hover,
+      &:active,
+      &:focus {
         .action-edit-name {
           opacity: 1;
           pointer-events: auto;
@@ -987,7 +987,9 @@
       }
     }
 
-    .title-value, .group-count, .action-edit {
+    .title-value,
+    .group-count,
+    .action-edit {
       display: inline-block;
       vertical-align: middle;
     }
@@ -1427,7 +1429,7 @@
     margin-top: 0.7em;
   }
 
-  .task-history-all-table    {
+  .task-history-all-table {
     margin-top: 1em;
   }
 
@@ -1480,7 +1482,8 @@
 // view - metrics
 // --------------------
 .instructor-dashboard-wrapper-2 section.idash-section#metrics {
-  .metrics-container, .metrics-header-container {
+  .metrics-container,
+  .metrics-header-container {
     position: relative;
     clear: both;
     width: 100%;
@@ -1505,7 +1508,8 @@
       height: 640px;
     }
 
-    .metrics-right, .metrics-right-header {
+    .metrics-right,
+    .metrics-right-header {
       position: relative;
       width: 65%;
 
@@ -1575,7 +1579,8 @@
               background-color: #ddd;
             }
 
-            th, td {
+            th,
+            td {
               padding: 10px;
             }
           }
@@ -1659,7 +1664,7 @@ input[name="subject"] {
 }
 
 .ecommerce-wrapper {
-  h2{
+  h2 {
     height: 26px;
     line-height: 26px;
 
@@ -1759,7 +1764,8 @@ input[name="subject"] {
   }
 
   input[name="download_company_name"],
-  input[name="active_company_name"], input[name="spent_company_name"] {
+  input[name="active_company_name"],
+  input[name="spent_company_name"] {
     @include margin-right(8px);
 
     height: 36px;
@@ -1770,7 +1776,7 @@ input[name="subject"] {
   .coupons-table {
     width: 100%;
 
-    tr:nth-child(even){
+    tr:nth-child(even) {
       background-color: $gray-l6;
       border-bottom: 1px solid #f3f3f3;
     }
@@ -1792,7 +1798,7 @@ input[name="subject"] {
       height: 40px;
       border-bottom: 1px solid #bebebe;
 
-      th:nth-child(5){
+      th:nth-child(5) {
         text-align: center;
         width: 120px;
       }
@@ -1840,7 +1846,7 @@ input[name="subject"] {
 
     // in_active coupon rows style
     .inactive_coupon {
-      background:  #fff0f0 !important;
+      background: #fff0f0 !important;
       text-decoration: line-through;
       color: rgba(51, 51, 51, 0.2);
       border-bottom: 1px solid #fff;
@@ -1882,19 +1888,20 @@ input[name="subject"] {
         }
       }
 
-      td:nth-child(5),td:first-child {
+      td:nth-child(5),
+      td:first-child {
         @include padding-left($baseline);
       }
 
-      td:nth-child(2){
+      td:nth-child(2) {
         line-height: 22px;
 
-        @include padding-right(0px);
+        @include padding-right(0);
 
         word-wrap: break-word;
       }
 
-      td:nth-child(5){
+      td:nth-child(5) {
         @include padding-left(0);
 
         text-align: center;
@@ -1914,8 +1921,11 @@ input[name="subject"] {
     width: 930px;
   }
   // coupon edit and add modals
-  #add-coupon-modal, #invalidate_registration_code_modal, #edit-coupon-modal,
-  #set-course-mode-price-modal, #registration_code_generation_modal {
+  #add-coupon-modal,
+  #invalidate_registration_code_modal,
+  #edit-coupon-modal,
+  #set-course-mode-price-modal,
+  #registration_code_generation_modal {
     .inner-wrapper {
       background: $white;
     }
@@ -1924,7 +1934,7 @@ input[name="subject"] {
       display: block;
       margin-top: ($baseline/4);
       font-size: 12px;
-      color: #646464
+      color: #646464;
     }
 
     width: 650px;
@@ -1933,8 +1943,10 @@ input[name="subject"] {
 
     border-radius: 2px;
 
-    input[type="button"]#update_coupon_button, input[type="button"]#add_coupon_button,
-    input[type="button"]#set_course_button, input[type="button"]#lookup_regcode {
+    input[type="button"]#update_coupon_button,
+    input[type="button"]#add_coupon_button,
+    input[type="button"]#set_course_button,
+    input[type="button"]#lookup_regcode {
       @include button(simple, $primary);
 
       @extend .button-reset;
@@ -1978,14 +1990,15 @@ input[name="subject"] {
         }
       }
 
-      li:nth-child(even){
+      li:nth-child(even) {
         @include margin-left(30px !important);
       }
 
-      li:nth-child(3), li:nth-child(4){
+      li:nth-child(3),
+      li:nth-child(4) {
         width: 100%;
 
-        @include margin-left(0px !important);
+        @include margin-left(0 !important);
       }
 
       li:nth-child(3) {
@@ -2058,8 +2071,8 @@ input[name="subject"] {
         margin-bottom: $baseline;
       }
 
-      li:nth-child(even){
-        @include margin-left(0px !important);
+      li:nth-child(even) {
+        @include margin-left(0 !important);
       }
 
       li:nth-child(3n) {
@@ -2082,7 +2095,7 @@ input[name="subject"] {
 
         min-height: 5px;
 
-        @include margin-left(0px !important);
+        @include margin-left(0 !important);
 
         input[type='checkbox'] {
           width: auto;
@@ -2090,9 +2103,9 @@ input[name="subject"] {
         }
       }
 
-      li#generate-registration-modal-field-country ~  li#generate-registration-modal-field-unit-price,
-      li#generate-registration-modal-field-country ~  li#generate-registration-modal-field-internal-reference {
-        @include margin-left(0px !important);
+      li#generate-registration-modal-field-country ~ li#generate-registration-modal-field-unit-price,
+      li#generate-registration-modal-field-country ~ li#generate-registration-modal-field-internal-reference {
+        @include margin-left(0 !important);
         @include margin-right(15px !important);
       }
 
@@ -2111,7 +2124,7 @@ input[name="subject"] {
     }
 
     li#set-course-mode-modal-field-currency {
-      @include margin-left(0px !important);
+      @include margin-left(0 !important);
 
       select {
         width: 100%;
@@ -2125,7 +2138,11 @@ input[name="subject"] {
       border-radius: 3px;
     }
 
-    #coupon-content, #course-content, #content, #registration-content, #regcode-content {
+    #coupon-content,
+    #course-content,
+    #content,
+    #registration-content,
+    #regcode-content {
       padding: $baseline;
 
       header {
@@ -2178,7 +2195,7 @@ input[name="subject"] {
         }
 
         .field label {
-          margin: 0 0 5px 0;
+          margin: 0 0 5px;
           -webkit-transition: color 0.15s ease-in-out 0s;
           -moz-transition: color 0.15s ease-in-out 0s;
           transition: color 0.15s ease-in-out 0s;
@@ -2259,8 +2276,9 @@ input[name="subject"] {
   }
 }
 
-.ecommerce-wrapper, .proctoring-wrapper {
-  h2{
+.ecommerce-wrapper,
+.proctoring-wrapper {
+  h2 {
     height: 26px;
     line-height: 26px;
 
@@ -2361,20 +2379,24 @@ input[name="subject"] {
   }
 }
 
-.special-allowance-container, .student-proctored-exam-container {
-  .allowance-table, .exam-attempts-table {
+.special-allowance-container,
+.student-proctored-exam-container {
+  .allowance-table,
+  .exam-attempts-table {
     width: 100%;
 
-    tr:nth-child(even){
+    tr:nth-child(even) {
       background-color: $gray-l6;
       border-bottom: 1px solid #f3f3f3;
     }
 
-    .allowance-headings, .exam-attempt-headings {
+    .allowance-headings,
+    .exam-attempt-headings {
       height: 40px;
       border-bottom: 1px solid #bebebe;
 
-      th:nth-child(5), th:nth-child(4){
+      th:nth-child(5),
+      th:nth-child(4) {
         text-align: center;
       }
 
@@ -2456,26 +2478,28 @@ input[name="subject"] {
         @include padding-left($baseline);
       }
 
-      td:nth-child(2){
+      td:nth-child(2) {
         line-height: 22px;
 
-        @include padding-right(0px);
+        @include padding-right(0);
 
         word-wrap: break-word;
       }
 
-      td:nth-child(5), td:nth-child(4), td:nth-child(6){
+      td:nth-child(5),
+      td:nth-child(4),
+      td:nth-child(6) {
         @include padding-left(0);
 
         text-align: center;
       }
 
-      td:nth-child(3){
+      td:nth-child(3) {
         word-wrap: break-word;
         text-align: center;
       }
 
-      td:nth-child(7){
+      td:nth-child(7) {
         word-wrap: break-word;
         text-align: center;
       }
@@ -2486,7 +2510,8 @@ input[name="subject"] {
     }
   }
 
-  .exam-attempts-content, .exam-allowances-content {
+  .exam-attempts-content,
+  .exam-allowances-content {
     padding-left: 0;
     padding-right: 0;
   }
@@ -2626,7 +2651,7 @@ input[name="subject"] {
   }
 
   p.under-heading {
-    margin: 12px 0 12px 0;
+    margin: 12px 0;
     line-height: 23px;
   }
 
@@ -2654,7 +2679,7 @@ input[name="subject"] {
           td {
             padding: 5px;
             vertical-align: middle;
-            text-align: left;;
+            text-align: left;
           }
         }
       }
diff --git a/lms/static/sass/course/layout/_courseware_header.scss b/lms/static/sass/course/layout/_courseware_header.scss
index de02fc600644..5f446ab492ce 100644
--- a/lms/static/sass/course/layout/_courseware_header.scss
+++ b/lms/static/sass/course/layout/_courseware_header.scss
@@ -5,12 +5,18 @@
   @extend %ui-print-excluded;
 
   border-bottom: none;
-  margin: 0 auto 0;
+  margin: 0 auto;
   padding: 0;
   width: 100%;
 
   .course-material {
     @extend %inner-wrapper;
+
+    @include media-breakpoint-down(md) {
+      overflow-x: scroll;
+      overflow-y: hidden;
+      white-space: nowrap;
+    }
   }
 
   .course-tabs {
@@ -19,7 +25,7 @@
 
     padding: ($baseline*0.75) 0 ($baseline*0.75) 0;
 
-    li {
+    .tab {
       display: inline-block;
       list-style: none;
 
@@ -42,7 +48,7 @@
         @extend %t-title7;
         @extend %t-regular;
 
-        color: $gray-d1;
+        color: theme-color("dark");
         display: block;
         text-align: center;
         text-decoration: none;
@@ -51,8 +57,8 @@
         &:hover,
         &:focus,
         &.active {
-          color: $uxpl-blue-hover-active;
-          border-bottom-color: $uxpl-blue-hover-active;
+          color: theme-color("primary");
+          border-bottom-color: theme-color("primary");
           background-color: transparent;
         }
       }
@@ -92,8 +98,6 @@
     display: none;
 
     &#login {
-      display: block;
-
       @include background-image(linear-gradient(-90deg, lighten($link-color, 8%), lighten($link-color, 5%) 50%, $link-color 50%, darken($link-color, 10%) 100%));
 
       border: 1px solid transparent;
@@ -103,12 +107,11 @@
       @include box-sizing(border-box);
 
       box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
-      color: $white;
+      color: theme-color("inverse");
       display: inline-block;
       font-family: $font-family-sans-serif;
-      font-size: 14px;
+      font-size: $font-size-sm;
       font-weight: bold;
-      display: inline-block;
       letter-spacing: 0;
       line-height: 1em;
       margin: 4px;
@@ -118,7 +121,9 @@
       text-shadow: 0 -1px rgba(0, 0, 0, 0.6);
       vertical-align: middle;
 
-      &:hover, &:active, &:focus {
+      &:hover,
+      &:active,
+      &:focus {
         @include background-image(linear-gradient(-90deg, $primary, $primary 50%, $primary 50%, $primary 100%));
       }
     }
@@ -156,7 +161,6 @@
       font: inherit;
       font-weight: bold;
     }
-
   }
 
   a#signup {
diff --git a/lms/static/sass/course/layout/_courseware_preview.scss b/lms/static/sass/course/layout/_courseware_preview.scss
index 4f2e932c973a..35a2d1f6a75c 100644
--- a/lms/static/sass/course/layout/_courseware_preview.scss
+++ b/lms/static/sass/course/layout/_courseware_preview.scss
@@ -1,7 +1,7 @@
 .wrapper-preview-menu {
   @include clearfix();
 
-  margin: 0 auto 0;
+  margin: 0 auto;
   padding: ($baseline*0.75);
   background-color: $lms-preview-menu-color;
   box-sizing: border-box;
diff --git a/lms/static/sass/course/wiki/_basic-html.scss b/lms/static/sass/course/wiki/_basic-html.scss
index 0224ddfbd219..795391d27ae0 100644
--- a/lms/static/sass/course/wiki/_basic-html.scss
+++ b/lms/static/sass/course/wiki/_basic-html.scss
@@ -6,7 +6,32 @@ section.wiki-body {
   }
 
   div#wiki_article {
-    html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre {
+    html,
+    address,
+    blockquote,
+    body,
+    dd,
+    div,
+    dl,
+    dt,
+    fieldset,
+    form,
+    frame,
+    frameset,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    ol,
+    p,
+    ul,
+    center,
+    dir,
+    hr,
+    menu,
+    pre {
       display: block;
       unicode-bidi: embed;
     }
@@ -47,7 +72,8 @@ section.wiki-body {
       display: table-column-group;
     }
 
-    td, th {
+    td,
+    th {
       display: table-cell;
     }
 
@@ -66,14 +92,14 @@ section.wiki-body {
 
     h1 {
       font-size: 1.6em;
-      margin: .67em 0;
+      margin: 0.67em 0;
       letter-spacing: 0;
     }
 
     h2 {
       text-transform: none;
       font-size: 1.4em;
-      margin: .75em 0;
+      margin: 0.75em 0;
       letter-spacing: 0;
     }
 
@@ -86,7 +112,16 @@ section.wiki-body {
       font-size: 1.1em;
     }
 
-    h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu {
+    h4,
+    p,
+    blockquote,
+    ul,
+    fieldset,
+    form,
+    ol,
+    dl,
+    dir,
+    menu {
       margin: 1.12em 0;
     }
 
@@ -100,7 +135,8 @@ section.wiki-body {
       margin: 1.67em 0;
     }
 
-    b, strong {
+    b,
+    strong {
       font-weight: bolder;
     }
 
@@ -110,11 +146,19 @@ section.wiki-body {
       border-left: 4px solid;
     }
 
-    i, cite, em, var, address {
+    i,
+    cite,
+    em,
+    var,
+    address {
       font-style: italic;
     }
 
-    pre, tt, code, kbd, samp {
+    pre,
+    tt,
+    code,
+    kbd,
+    samp {
       font-family: monospace;
     }
 
@@ -122,7 +166,10 @@ section.wiki-body {
       white-space: pre;
     }
 
-    button, textarea, input, select {
+    button,
+    textarea,
+    input,
+    select {
       display: inline-block;
     }
 
@@ -130,7 +177,9 @@ section.wiki-body {
       font-size: 1.17em;
     }
 
-    small, sub, sup {
+    small,
+    sub,
+    sup {
       font-size: 0.83em;
     }
 
@@ -146,15 +195,21 @@ section.wiki-body {
       border-spacing: 2px;
     }
 
-    thead, tbody, tfoot {
+    thead,
+    tbody,
+    tfoot {
       vertical-align: middle;
     }
 
-    td, th, tr {
+    td,
+    th,
+    tr {
       vertical-align: inherit;
     }
 
-    s, strike, del {
+    s,
+    strike,
+    del {
       text-decoration: line-through;
     }
 
@@ -164,7 +219,11 @@ section.wiki-body {
       border: none;
     }
 
-    ol, ul, dir, menu, dd {
+    ol,
+    ul,
+    dir,
+    menu,
+    dd {
       margin-left: 40px;
     }
 
@@ -172,12 +231,16 @@ section.wiki-body {
       list-style-type: decimal;
     }
 
-    ol ul, ul ol, ul ul, ol ol {
+    ol ul,
+    ul ol,
+    ul ul,
+    ol ol {
       margin-top: 0;
       margin-bottom: 0;
     }
 
-    u, ins {
+    u,
+    ins {
       text-decoration: underline;
     }
 
diff --git a/lms/static/sass/course/wiki/_create.scss b/lms/static/sass/course/wiki/_create.scss
index 8e283bb7fc5a..664ce93bb848 100644
--- a/lms/static/sass/course/wiki/_create.scss
+++ b/lms/static/sass/course/wiki/_create.scss
@@ -5,7 +5,7 @@ form#wiki_revision {
 
   label {
     display: block;
-    margin-bottom: 7px ;
+    margin-bottom: 7px;
   }
 
   .CodeMirror-scroll {
@@ -56,7 +56,8 @@ form#wiki_revision {
   margin-top: lh();
   width: flex-grid(3, 9);
 
-  &:hover, &:focus {
+  &:hover,
+  &:focus {
     color: #333;
   }
 
diff --git a/lms/static/sass/discussion/utilities/_v1-compatibility.scss b/lms/static/sass/discussion/utilities/_v1-compatibility.scss
index bf384d477ad6..787a4fcd448e 100644
--- a/lms/static/sass/discussion/utilities/_v1-compatibility.scss
+++ b/lms/static/sass/discussion/utilities/_v1-compatibility.scss
@@ -1,10 +1,10 @@
 // Utilities to provide v1-styling compatibility
 
-@mixin font-size($sizeValue: 16){
+@mixin font-size($sizeValue: 16) {
   font-size: $sizeValue + px;
 }
 
-@mixin line-height($fontSize: auto){
+@mixin line-height($fontSize: auto) {
   line-height: ($fontSize*1.48) + px;
 }
 
diff --git a/lms/static/sass/features/_bookmarks-v1.scss b/lms/static/sass/features/_bookmarks-v1.scss
index 776b461932c5..580983f88f46 100644
--- a/lms/static/sass/features/_bookmarks-v1.scss
+++ b/lms/static/sass/features/_bookmarks-v1.scss
@@ -52,6 +52,8 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
 
   .bookmark-button {
     &::before {
+      @include padding-right($baseline / 4);
+
       content: $bookmark-icon;
       font-family: FontAwesome;
     }
diff --git a/lms/static/sass/multicourse/_about_pages.scss b/lms/static/sass/multicourse/_about_pages.scss
index c49d63b3e9cf..3185341ef710 100644
--- a/lms/static/sass/multicourse/_about_pages.scss
+++ b/lms/static/sass/multicourse/_about_pages.scss
@@ -27,8 +27,10 @@
 
       text-transform: lowercase;
 
-      &:hover, &:active, &:focus {
-        border-color: rgb(200,200,200);
+      &:hover,
+      &:active,
+      &:focus {
+        border-color: rgb(200, 200, 200);
         color: $body-color;
         text-decoration: none;
       }
@@ -41,7 +43,7 @@
     }
 
     .our-mission {
-      border-bottom: 1px solid rgb(220,220,220);
+      border-bottom: 1px solid rgb(220, 220, 220);
 
       @include clearfix();
 
@@ -49,7 +51,7 @@
       padding-bottom: 40px;
 
       .logo {
-        @include border-right(1px solid rgb(200,200,200));
+        @include border-right(1px solid rgb(200, 200, 200));
         @include box-sizing(border-box);
         @include float(left);
 
@@ -83,7 +85,7 @@
     }
 
     .message {
-      border-bottom: 1px solid rgb(220,220,220);
+      border-bottom: 1px solid rgb(220, 220, 220);
 
       @include clearfix();
 
@@ -100,7 +102,7 @@
       }
 
       h2 {
-        border-bottom: 1px solid rgb(200,200,200);
+        border-bottom: 1px solid rgb(200, 200, 200);
         padding-bottom: 15px;
       }
 
@@ -114,7 +116,7 @@
         width: flex-grid(3);
 
         img {
-          background: rgb(245,245,245);
+          background: rgb(245, 245, 245);
           display: block;
           width: 100%;
         }
@@ -167,7 +169,7 @@
     @include clearfix();
 
     nav.categories {
-      border: 1px solid rgb(220,220,220);
+      border: 1px solid rgb(220, 220, 220);
 
       @include box-sizing(border-box);
       @include float(left);
@@ -185,8 +187,9 @@
 
         text-align: left;
 
-        &:hover, &:focus {
-          background: rgb(245,245,245);
+        &:hover,
+        &:focus {
+          background: rgb(245, 245, 245);
           text-decoration: none;
         }
       }
@@ -205,7 +208,7 @@
         }
 
         > h2 {
-          border-bottom: 1px solid rgb(220,220,220);
+          border-bottom: 1px solid rgb(220, 220, 220);
           margin-bottom: ($baseline*2);
           padding-bottom: $baseline;
         }
@@ -225,7 +228,7 @@
 
   .press {
     .press-story {
-      border-bottom: 1px solid rgb(220,220,220);
+      border-bottom: 1px solid rgb(220, 220, 220);
 
       @include clearfix();
 
@@ -240,7 +243,7 @@
 
       .article-cover {
         background: rgb(255, 255, 255);
-        border: 1px solid rgb(120,120,120);
+        border: 1px solid rgb(120, 120, 120);
 
         @include box-sizing(border-box);
         @include float(left);
diff --git a/lms/static/sass/multicourse/_account.scss b/lms/static/sass/multicourse/_account.scss
index 2053eab67b55..0899945a1496 100644
--- a/lms/static/sass/multicourse/_account.scss
+++ b/lms/static/sass/multicourse/_account.scss
@@ -92,7 +92,6 @@
     padding: $baseline/2 $baseline*2.5;
     text-transform: lowercase;
     color: $very-light-text;
-    letter-spacing: 0.1rem;
     font-weight: 600;
     cursor: pointer;
     text-align: center;
@@ -194,7 +193,12 @@
     @extend %body-text;
   }
 
-  h1, h2, h3, h4, h5, h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     letter-spacing: 0;
   }
 
@@ -506,7 +510,8 @@
       @extend %m-btn-primary;
       @extend %t-action2;
 
-      &:disabled, &.is-disabled {
+      &:disabled,
+      &.is-disabled {
         opacity: 0.3;
         cursor: default !important;
       }
@@ -564,7 +569,7 @@
   }
 
   .form-actions.form-third-party-auth {
-    width: flex-grid(8,8);
+    width: flex-grid(8, 8);
     margin-bottom: $baseline;
 
     button[type="submit"] {
@@ -615,7 +620,6 @@
       &.button-oa2-linkedin-oauth2:hover {
         box-shadow: 0 2px 1px 0 #005d8e;
       }
-
     }
   }
 
@@ -626,7 +630,7 @@
     margin: 0 0 $baseline 0;
     border-bottom: 3px solid shade($yellow, 10%);
     padding: $baseline $baseline;
-    background: tint($yellow,20%);
+    background: tint($yellow, 20%);
 
     .message-title {
       @extend %heading-4;
diff --git a/lms/static/sass/multicourse/_courses.scss b/lms/static/sass/multicourse/_courses.scss
index b583c8fdb52d..5a49dc77d7f5 100644
--- a/lms/static/sass/multicourse/_courses.scss
+++ b/lms/static/sass/multicourse/_courses.scss
@@ -23,14 +23,15 @@ $facet-background-color: #007db8;
 
 // +Layout - Courses Container
 // ====================
-.find-courses, .university-profile {
+.find-courses,
+.university-profile {
   .discovery-button:not(:disabled) {
     @extend %t-action2;
 
     @include text-align(left);
 
     outline: 0 none;
-    box-shadow:none;
+    box-shadow: none;
     border: 0;
     background: none;
     padding: 0 ($baseline*0.6);
@@ -39,7 +40,7 @@ $facet-background-color: #007db8;
     text-transform: none;
 
     //STATE: hover
-    &::hover {
+    &:hover {
       background: none;
     }
   }
@@ -131,7 +132,8 @@ $facet-background-color: #007db8;
 
 // +Hero - Home Header
 // ====================
-.find-courses, .university-profile {
+.find-courses,
+.university-profile {
   header.search {
     background: $gray-l5;
     background-size: cover;
@@ -162,7 +164,8 @@ $facet-background-color: #007db8;
         z-index: 2;
       }
 
-      &.main-search, &.university-search {
+      &.main-search,
+      &.university-search {
         text-align: center;
 
         .heading-group {
@@ -180,7 +183,7 @@ $facet-background-color: #007db8;
           vertical-align: middle;
 
           &::after {
-            @include right(0px);
+            @include right(0);
 
             content: "";
             display: block;
@@ -203,7 +206,8 @@ $facet-background-color: #007db8;
           text-transform: none;
         }
 
-        h1, h2 {
+        h1,
+        h2 {
           display: inline-block;
           letter-spacing: 1px;
           margin-bottom: 0;
@@ -247,7 +251,6 @@ $facet-background-color: #007db8;
       @include media($bp-large) {
         @include span-columns(8);
       }
-
     }
 
     .wrapper-search-input {
@@ -318,7 +321,8 @@ $facet-background-color: #007db8;
     text-shadow: none;
 
     //STATE: hover, focus
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       background: $m-blue-d5;
     }
   }
@@ -463,7 +467,8 @@ $facet-background-color: #007db8;
       content: "";
     }
 
-    .header-search-facets, .header-facet {
+    .header-search-facets,
+    .header-facet {
       @extend %t-title6;
       @extend %t-strong;
 
@@ -579,7 +584,8 @@ $facet-background-color: #007db8;
 
 // +All Other Styles
 // ====================
-.find-courses, .university-profile {
+.find-courses,
+.university-profile {
   background: $gray-l5;
   padding-bottom: ($baseline*3);
 
@@ -591,6 +597,5 @@ $facet-background-color: #007db8;
     border-top: 1px solid $border-color-2;
     margin-top: $baseline;
     padding-top: ($baseline*3);
-
   }
 }
diff --git a/lms/static/sass/multicourse/_help.scss b/lms/static/sass/multicourse/_help.scss
index 8fe5295b6470..bbcf0a97649c 100644
--- a/lms/static/sass/multicourse/_help.scss
+++ b/lms/static/sass/multicourse/_help.scss
@@ -3,7 +3,7 @@
     @include clearfix();
 
     nav.categories {
-      border: 1px solid rgb(220,220,220);
+      border: 1px solid rgb(220, 220, 220);
 
       @include box-sizing(border-box);
       @include float(left);
@@ -20,8 +20,9 @@
         @include padding(12px, 0, 12px, 20px);
         @include text-align(left);
 
-        &:hover, &:focus {
-          background: rgb(245,245,245);
+        &:hover,
+        &:focus {
+          background: rgb(245, 245, 245);
           text-decoration: none;
         }
       }
@@ -40,7 +41,7 @@
         }
 
         > h2 {
-          border-bottom: 1px solid rgb(220,220,220);
+          border-bottom: 1px solid rgb(220, 220, 220);
           margin-bottom: ($baseline*2);
           padding-bottom: $baseline;
         }
diff --git a/lms/static/sass/multicourse/_home.scss b/lms/static/sass/multicourse/_home.scss
index 269e256956a1..a1f9a0c138b7 100644
--- a/lms/static/sass/multicourse/_home.scss
+++ b/lms/static/sass/multicourse/_home.scss
@@ -54,7 +54,8 @@ $course-search-input-height: ($button-size);
       vertical-align: top;
 
       // STATE: hover and focus
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         .actions {
           display: none;
         }
@@ -152,7 +153,8 @@ $course-search-input-height: ($button-size);
           text-shadow: none;
 
           // STATE: hover and focus
-          &:hover, &:focus {
+          &:hover,
+          &:focus {
             background: $m-blue-l1;
           }
         }
@@ -181,7 +183,8 @@ $course-search-input-height: ($button-size);
       width: flex-grid(2) + flex-gutter();
       z-index: 2;
 
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         text-decoration: underline;
       }
 
@@ -239,7 +242,8 @@ $course-search-input-height: ($button-size);
         }
       }
 
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         .play-intro {
           @include background-image(linear-gradient(-90deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.8)));
 
@@ -416,7 +420,8 @@ $course-search-input-height: ($button-size);
 
             @include transition(all 0.15s ease-in-out 0s);
 
-            &:hover, &:focus {
+            &:hover,
+            &:focus {
               color: $lighter-base-font-color;
             }
           }
@@ -431,7 +436,8 @@ $course-search-input-height: ($button-size);
           z-index: 2;
         }
 
-        &:hover, &:focus {
+        &:hover,
+        &:focus {
           text-decoration: none;
 
           &::before {
@@ -478,10 +484,11 @@ $course-search-input-height: ($button-size);
             }
 
             .name > span {
-              font-size: 1.0em;
+              font-size: 1em;
             }
 
-            &:hover, &:focus {
+            &:hover,
+            &:focus {
               .name {
                 bottom: 14px;
               }
@@ -571,7 +578,8 @@ $course-search-input-height: ($button-size);
 
           width: flex-grid(4);
 
-          &:hover, &:focus {
+          &:hover,
+          &:focus {
             background: $body-bg;
             border: 1px solid $border-color-2;
             box-shadow: inset 0 0 3px 0 $shadow-l1;
@@ -614,7 +622,8 @@ $course-search-input-height: ($button-size);
               color: $body-color;
               font: 700 1em/1.2em $font-family-sans-serif;
 
-              &:hover, &:focus {
+              &:hover,
+              &:focus {
                 color: $blue;
                 text-decoration: underline;
               }
@@ -649,7 +658,8 @@ $course-search-input-height: ($button-size);
 
             color: lighten($body-color, 50%);
 
-            &:hover, &:focus {
+            &:hover,
+            &:focus {
               color: $blue;
               text-decoration: underline;
             }
diff --git a/lms/static/sass/shared-v2/_layouts.scss b/lms/static/sass/shared-v2/_layouts.scss
index e781285a79b4..7a7d5b9b7887 100644
--- a/lms/static/sass/shared-v2/_layouts.scss
+++ b/lms/static/sass/shared-v2/_layouts.scss
@@ -2,7 +2,12 @@
 
 .content-wrapper {
   max-width: map-get($container-max-widths, xl);
-  padding-bottom: $baseline*2;
+  margin-top: $baseline;
+  padding: 0 0 $baseline/2;
+
+  @include media-breakpoint-up(md) {
+    padding: 0 $baseline $baseline/2;
+  }
 
   .page-content-container {
     @include clearfix();
@@ -39,21 +44,23 @@
         display: inline-block;
       }
 
-      .page-header-secondary {
-        @include float(right);
-        @include text-align(right);
+      @include media-breakpoint-up(md) {
+        .page-header-secondary {
+          @include float(right);
+          @include text-align(right);
 
-        display: flex;
-        vertical-align: text-bottom;
+          display: flex;
+          vertical-align: text-bottom;
 
-        .form-actions {
-          @include margin-left($baseline/2);
+          .form-actions {
+            @include margin-left($baseline/2);
 
-          display: inline-block;
-        }
+            display: inline-block;
+          }
 
-        .form-actions > *:first-child {
-          @include margin-left(0);
+          .form-actions > *:first-child {
+            @include margin-left(0);
+          }
         }
       }
     }
diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss
index 190ab6bf33a1..ed2fdbc32057 100644
--- a/lms/static/sass/views/_verification.scss
+++ b/lms/static/sass/views/_verification.scss
@@ -652,7 +652,8 @@
           border-color: $m-blue-d1;
         }
 
-        .step-number, .step-name {
+        .step-number,
+        .step-name {
           color: $m-gray-d3;
         }
       }
@@ -874,7 +875,7 @@
 
           @include float(left);
 
-          width: flex-grid(4,12);
+          width: flex-grid(4, 12);
 
           @include text-align(right);
 
@@ -1163,7 +1164,8 @@
               }
             }
 
-            .contribution-option-other1 label, .contribution-option-other2 label {
+            .contribution-option-other1 label,
+            .contribution-option-other2 label {
               @extend %text-sr;
             }
           }
@@ -1196,7 +1198,8 @@
       }
 
       // previously defined in HTML
-      video, canvas {
+      video,
+      canvas {
         position: relative;
         display: block;
 
@@ -1302,7 +1305,9 @@
         margin-right: ($baseline/4);
       }
 
-      .deco-denomination, .label-value, .denomination-name {
+      .deco-denomination,
+      .label-value,
+      .denomination-name {
         display: inline-block;
         vertical-align: middle;
       }
@@ -1443,7 +1448,8 @@
         margin-bottom: 0;
       }
 
-      .wrapper-copy, .list-actions {
+      .wrapper-copy,
+      .list-actions {
         display: inline-block;
         vertical-align: middle;
       }
@@ -1784,7 +1790,7 @@
         .placeholder-art {
           position: relative;
           display: inline-block;
-          margin: $baseline 0 ($baseline/2) 0;
+          margin: $baseline 0 ($baseline/2);
           padding: $baseline;
           background: $verified-color-lvl3;
           border-radius: ($baseline*10);
@@ -1844,7 +1850,8 @@
           padding: ($baseline/2) $baseline;
         }
 
-        .copy-super, .copy-sub {
+        .copy-super,
+        .copy-sub {
           display: block;
         }
 
@@ -1905,11 +1912,6 @@
     }
   }
 
-  // VIEW: take and review photos
-  &.step-photos {
-
-  }
-
   // VIEW: take cam photo
   &.step-photos-cam {
 
@@ -1967,7 +1969,8 @@
           border-color: $verified-color-lvl3;
         }
 
-        .step-number, .step-name {
+        .step-number,
+        .step-name {
           color: $m-gray-l3;
         }
       }
@@ -2014,7 +2017,8 @@
 
         color: $m-blue-d3;
 
-        &:hover, &:focus {
+        &:hover,
+        &:focus {
           color: $m-blue-d1;
           border: none;
         }
@@ -2043,7 +2047,7 @@
           margin-top: ($baseline/2);
         }
 
-        .action-verify label  {
+        .action-verify label {
           @extend %t-copy-sub1;
         }
       }
@@ -2328,7 +2332,8 @@
         border-color: $m-blue-d1;
       }
 
-      .step-number, .step-name {
+      .step-number,
+      .step-name {
         color: $m-gray-d3;
       }
     }
@@ -2383,14 +2388,15 @@
           border-color: $m-blue-d1;
         }
 
-        .step-number, .step-name {
+        .step-number,
+        .step-name {
           color: $m-gray-d3;
         }
       }
     }
 
     .progress-sts-value {
-      width: 0% !important;
+      width: 0 !important;
     }
   }
 
@@ -2423,7 +2429,8 @@
           border-color: $m-blue-d1;
         }
 
-        .step-number, .step-name {
+        .step-number,
+        .step-name {
           color: $m-gray-d3;
         }
       }
@@ -2448,7 +2455,8 @@
           border-color: $verified-color-lvl3;
         }
 
-        .step-number, .step-name {
+        .step-number,
+        .step-name {
           color: $m-gray-l3;
         }
       }
@@ -2462,7 +2470,8 @@
           border-color: $m-blue-d1;
         }
 
-        .step-number, .step-name {
+        .step-number,
+        .step-name {
           color: $m-gray-d3;
         }
       }
diff --git a/lms/templates/courseware/course_navigation.html b/lms/templates/courseware/course_navigation.html
index 443232384ef6..b7e4f0432deb 100644
--- a/lms/templates/courseware/course_navigation.html
+++ b/lms/templates/courseware/course_navigation.html
@@ -34,7 +34,7 @@
     tab_list = get_course_tab_list(request, course)
     %>
     % if uses_bootstrap:
-        <nav class="navbar course-tabs pb-0 navbar-expand-lg">
+        <nav class="navbar course-tabs pb-0 navbar-expand">
             <ul class="navbar-nav mr-auto">
                 % for tab in tab_list:
                     <%
diff --git a/lms/templates/seq_module.html b/lms/templates/seq_module.html
index da3039c8e8d0..b8a4aad687cc 100644
--- a/lms/templates/seq_module.html
+++ b/lms/templates/seq_module.html
@@ -15,7 +15,11 @@
   <div class="sequence-nav">
     <button class="sequence-nav-button button-previous" aria-hidden="true">
       <span class="icon fa fa-chevron-prev" aria-hidden="true"></span>
-      <span>${_('Previous')}</span>
+      <span class="sequence-nav-button-label">${_('Previous')}</span>
+    </button>
+    <button class="sequence-nav-button button-next" aria-hidden="true">
+      <span class="sequence-nav-button-label">${_('Next')}</span>
+      <span class="icon fa fa-chevron-next" aria-hidden="true"></span>
     </button>
     <nav class="sequence-list-wrapper" aria-label="${_('Sequence')}">
       <ol id="sequence-list" role="tablist">
@@ -41,10 +45,6 @@
         % endfor
       </ol>
     </nav>
-    <button class="sequence-nav-button button-next" aria-hidden="true">
-      <span>${_('Next')}</span>
-      <span class="icon fa fa-chevron-next" aria-hidden="true"></span>
-    </button>
   </div>
 
   <div class="sr-is-focusable" tabindex="-1"></div>
diff --git a/lms/templates/ux/reference/bootstrap/course-skeleton.html b/lms/templates/ux/reference/bootstrap/course-skeleton.html
index 095ff23487dd..d292d3a8ccbb 100644
--- a/lms/templates/ux/reference/bootstrap/course-skeleton.html
+++ b/lms/templates/ux/reference/bootstrap/course-skeleton.html
@@ -15,7 +15,7 @@
 %>
 
 <%block name="content">
-<nav class="navbar course-tabs navbar-expand-lg">
+<nav class="navbar course-tabs navbar-expand">
     <ul class="navbar-nav mr-auto">
         <li class="nav-item active">
             <a class="nav-link" href="#">${_('Course')} <span class="sr-only">(current)</span></a>
diff --git a/lms/templates/ux/reference/bootstrap/unit-page.html b/lms/templates/ux/reference/bootstrap/unit-page.html
index 73df0d1d7ee8..40475368f8b0 100644
--- a/lms/templates/ux/reference/bootstrap/unit-page.html
+++ b/lms/templates/ux/reference/bootstrap/unit-page.html
@@ -18,7 +18,7 @@
 </%block>
 
 <%block name="content">
-<nav class="navbar course-tabs navbar-expand-lg">
+<nav class="navbar course-tabs navbar-expand">
     <ul class="navbar-nav mr-auto">
         <li class="nav-item active">
             <a class="nav-link" href="#">Course <span class="sr-only">(current)</span></a>
diff --git a/package.json b/package.json
index d4868ccfb48d..c3ffce2bc610 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
     "coffee-loader": "^0.7.3",
     "coffee-script": "1.6.1",
     "css-loader": "^0.28.5",
-    "@edx/edx-bootstrap": "^0.4.0",
+    "@edx/edx-bootstrap": "^0.4.1",
     "@edx/paragon": "^0.2.0",
     "@edx/studio-frontend": "^0.3.0",
     "edx-pattern-library": "0.18.1",
diff --git a/scripts/all-tests.sh b/scripts/all-tests.sh
index c3305c419fc1..b435d97a0401 100755
--- a/scripts/all-tests.sh
+++ b/scripts/all-tests.sh
@@ -13,7 +13,7 @@ set -e
 # Violations thresholds for failing the build
 export PYLINT_THRESHOLD=3600
 export ESLINT_THRESHOLD=9134
-export STYLELINT_THRESHOLD=1410
+export STYLELINT_THRESHOLD=973
 
 XSSLINT_THRESHOLDS=`cat scripts/xsslint_thresholds.json`
 export XSSLINT_THRESHOLDS=${XSSLINT_THRESHOLDS//[[:space:]]/}