diff --git a/core/misc/farbtastic/farbtastic.css b/core/misc/farbtastic/farbtastic.css
index 25a68eb..8c0a9da 100644
--- a/core/misc/farbtastic/farbtastic.css
+++ b/core/misc/farbtastic/farbtastic.css
@@ -1,5 +1,6 @@
 
 .farbtastic {
+  margin: 0 auto;
   position: relative;
 }
 .farbtastic * {
diff --git a/core/modules/color/color.admin-rtl.css b/core/modules/color/color.admin-rtl.css
index d5bfbe8..d8086d1 100644
--- a/core/modules/color/color.admin-rtl.css
+++ b/core/modules/color/color.admin-rtl.css
@@ -4,30 +4,22 @@
  */
 
 #placeholder {
-  left: 0;
-  right: auto;
+  float: left;
 }
 
-/* Palette */
-.color-form .form-item {
-  padding-left: 0;
-  padding-right: 1em;
-}
-.color-form label {
-  float: right;
-  clear: right;
-}
-.color-form .form-text,
-.color-form .form-select {
-  float: right;
+.color-form .form-item-scheme,
+#palette {
+  margin-right: 0;
+  margin-left: 195px;
+  padding-right: 0;
+  padding-left: 40px;
 }
+
+/* Palette */
 .color-form .form-text {
   margin-right: 0;
   margin-left: 5px;
 }
-#palette .hook {
-  float: right;
-}
 #palette .down,
 #palette .up,
 #palette .both {
@@ -40,7 +32,7 @@
   background-position: 0 -54px;
 }
 #palette .lock {
-  float: right;
+  left: auto;
   right: -10px;
 }
 .js #preview {
diff --git a/core/modules/color/color.admin.css b/core/modules/color/color.admin.css
index e9aee91..6ad4899 100644
--- a/core/modules/color/color.admin.css
+++ b/core/modules/color/color.admin.css
@@ -4,40 +4,41 @@
  */
 
 /* Farbtastic placement */
-.color-form {
-  max-width: 50em;
-  position: relative;
-}
 #placeholder {
-  position: absolute;
-  top: 0;
-  right: 0; /* LTR */
+  float: right; /* LTR */
 }
-
 /* Palette */
 .color-form .form-item {
-  height: 2em;
-  line-height: 2em;
-  padding-left: 1em; /* LTR */
+  padding: 0.5em 1em;
   margin: 0.5em 0;
 }
+.color-form .form-item-scheme,
+#palette {
+  margin-right: 195px; /* The width of the color widget */ /* LTR */
+  padding-right: 40px;
+  max-width: 780px;
+}
 .color-form label {
-  float: left; /* LTR */
-  clear: left; /* LTR */
-  width: 10em;
+  display: inline-block;
+  width: 30%;
 }
 .color-form .form-text,
 .color-form .form-select {
-  float: left; /* LTR */
+  display: inline-block;
+  width: 30%;
 }
 .color-form .form-text {
   text-align: center;
   margin-right: 5px; /* LTR */
   cursor: pointer;
 }
-
+@media all and (max-width: 1020px) {
+  .color-form label {
+    width: 40%;
+  }
+}
 #palette .hook {
-  float: left; /* LTR */
+  display: inline-block;
   margin-top: 3px;
   width: 16px;
   height: 16px;
@@ -53,26 +54,45 @@
 #palette .both {
   background-position: 100% -54px; /* LTR */
 }
-
 #palette .lock {
-  float: left; /* LTR */
+  display: inline-block;
   position: relative;
-  top: -1.4em;
-  left: -10px; /* LTR */
+  top: -25px;
+  left: -10px;
   width: 20px;
-  height: 25px;
+  height: 19px;
   background: url(images/lock.png) no-repeat 50% 2px;
   cursor: pointer;
 }
 #palette .unlocked {
   background-position: 50% -22px;
 }
-#palette .form-item {
-  width: 20em;
-}
 #palette .item-selected {
   background: #eee;
 }
+@media all and (max-width: 680px) {
+  .color-form label {
+    display: block;
+    width: auto;
+  }
+  .color-form .form-text,
+  .color-form .form-select {
+    width: 80%;
+  }
+  #palette .lock {
+    top: -30px;
+  }
+}
+@media all and (max-width: 530px) {
+  #placeholder {
+    float: none;
+  }
+  .color-form .form-item-scheme,
+  #palette {
+    margin-right: 0;
+    padding-right: 0;
+  }
+}
 
 /* Preview */
 #preview {
diff --git a/core/themes/bartik/color/preview.css b/core/themes/bartik/color/preview.css
index 805ce79..e7a4f52 100644
--- a/core/themes/bartik/color/preview.css
+++ b/core/themes/bartik/color/preview.css
@@ -1,12 +1,3 @@
-
-/* ---------- Color form ----------- */
-#color_scheme_form #palette .form-item {
-  width: 25em;
-}
-#color_scheme_form #palette .form-item label {
-  width: 15em;
-}
-
 /* ---------- Preview Styles ----------- */
 
 .js #preview {
@@ -41,28 +32,35 @@
 }
 #preview-main-menu {
   clear: both;
-  padding: 0 15px 3px;
-}
-#preview-main-menu-links a {
-  color: #d9d9d9;
-  padding: 0.6em 1em 0.4em;
 }
 #preview-main-menu-links {
   font-size: 0.929em;
+  margin: 0 5px;
+  padding: 0;
+  text-align: left;
+}
+#preview-main-menu-links li {
+  float: none;
+  list-style: none;
   margin: 0;
   padding: 0;
+  width: 100%;
 }
 #preview-main-menu-links a {
   color: #333;
   background: #ccc;
   background: rgba(255, 255, 255, 0.7);
+  float: none;
+  display: block;
+  text-decoration: none;
   text-shadow: 0 1px #eee;
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
+  border-radius: 8px;
+  margin-bottom: 4px;
+  padding: 0.9em 0 0.9em 10px;
 }
 #preview-main-menu-links a:hover,
 #preview-main-menu-links a:focus {
-  background: #fff;
+  background: #f6f6f2;
   background: rgba(255, 255, 255, 0.95);
 }
 #preview-main-menu-links a:active {
@@ -72,24 +70,23 @@
 #preview-main-menu-links li a.active {
   border-bottom: none;
 }
-#preview-main-menu-links li {
-  display: inline;
-  list-style-type: none;
-  padding: 0.6em 0 0.4em;
-}
-#preview-sidebar,
-#preview-content {
-  display: inline;
-  float: left;
-  position: relative;
-}
-#preview-sidebar {
-  margin-left: 15px;
-  width: 210px;
-}
-#preview-content {
-  margin-left: 30px;
-  width: 26.5em;
+@media all and (min-width: 851px) {
+  #preview-sidebar,
+  #preview-content {
+    display: inline;
+    float: left;
+    padding: 0 10px;
+    position: relative;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  #preview-sidebar {
+    width: 25%;
+  }
+  #preview-content {
+    width: 75%;
+  }
 }
 #preview-sidebar .preview-block {
   border: 1px solid;
@@ -139,12 +136,17 @@
   color: rgba(255, 255, 255, 0.95);
   text-decoration: underline;
 }
-#preview-footer-wrapper .preview-footer-column {
-  display: inline;
-  float: left;
-  padding: 0 10px;
-  position: relative;
-  width: 220px;
+@media all and (min-width: 851px) {
+  #preview-footer-wrapper .preview-footer-column {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    display: inline;
+    float: left;
+    padding: 0 10px;
+    position: relative;
+    width: 50%;
+  }
 }
 #preview-footer-wrapper .preview-block {
   border: 1px solid #444;
@@ -192,3 +194,79 @@
   background-color: rgba(255, 255, 255, 0.05);
   text-decoration: none;
 }
+
+@media all and (min-width: 461px) and (max-width: 900px) {
+ /* ------------ Header and Menus -------------------------- */
+
+  #preview-logo {
+    padding: 5px 0 0 5px; /* LTR */
+  }
+  #name-and-slogan {
+    padding: 10px 10px 8px;
+  }
+  #preview-main-menu-links {
+    margin: 0 5px;
+    padding: 0;
+    overflow: hidden;
+    text-align: center;
+  }
+  #preview-main-menu-links li {
+    float: left;
+    margin-right: 5px;
+    padding: 0;
+    display: inline-block;
+    width: 32.75%;
+  }
+  #preview-main-menu-links li:nth-child(3n) {
+    margin-right: -5px;
+  }
+  #preview-main-menu-links a {
+    float: none;
+    display: block;
+    border-radius: 8px;
+    margin-bottom: 5px;
+    padding: 0.9em 5px;
+  }
+}
+
+@media all and (min-width: 901px) {
+
+  .region-header {
+    margin: 1em 5px 1.5em;
+  }
+  #preview-logo {
+    padding: 15px 15px 15px 10px; /* LTR */
+  }
+  #name-and-slogan {
+    padding: 26px 0 0;
+    margin: 0 0 30px 15px; /* LTR */
+  }
+  #site-name {
+    font-size: 1.821em;
+  }
+  #preview-main-menu-links {
+    font-size: 0.929em;
+    margin: 0;
+    overflow: hidden;
+    padding: 0 15px;
+  }
+  #preview-main-menu-links li {
+    float: left; /* LTR */
+    list-style: none;
+    padding: 0 1px;
+    margin: 0 1px;
+    width: auto;
+  }
+  #preview-main-menu-links a {
+    float: left; /* LTR */
+    padding: 0.7em 0.8em;
+    margin-bottom: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .featured #preview-main-menu-links li a:active,
+  .featured #preview-main-menu-links li a.active {
+  background: #f0f0f0;
+  background: rgba(240, 240, 240, 1.0);
+  }
+}