diff --git a/webcompat/static/css/src/issue-wizard-animations.css b/webcompat/static/css/src/issue-wizard-animations.css
new file mode 100644
index 000000000..d1010107d
--- /dev/null
+++ b/webcompat/static/css/src/issue-wizard-animations.css
@@ -0,0 +1,138 @@
+/*
+* step and form animations
+*/
+
+@keyframes validated {
+  0% {
+    opacity: 0;
+    transform: scale(.8);
+  }
+  50% {
+    transform: scale(1.3);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes slidedown {
+  0% {
+    opacity: 0;
+    z-index: -1;
+  }
+  99% {
+    z-index: -1;
+  }
+  100% {
+    margin-top: var(--between-steps-margin);
+    opacity: 1;
+    z-index: 0;
+  }
+}
+
+@keyframes slideup {
+  0% {
+    margin-top: var(--between-steps-margin);
+    z-index: -1;
+  }
+  100% {
+    margin-top: var(--presumed-high-step-height);
+    opacity: 0;
+    z-index: -1;
+  }
+}
+
+@keyframes slideupbig {
+  0% {
+    margin-top: var(--between-steps-margin);
+    z-index: -1;
+  }
+  100% {
+    margin-top: var(--presumed-high-step-height);
+    opacity: 0;
+    z-index: -1;
+  }
+}
+
+@keyframes slideupdown {
+  0% {
+    margin-top: var(--between-steps-margin);
+    opacity: 1;
+    z-index: -1;
+  }
+  50% {
+    margin-top: var(--presumed-step-height-updown);
+    opacity: 0;
+    z-index: -1;
+  }
+  99% {
+    z-index: -1;
+  }
+  100% {
+    margin-top: var(--between-steps-margin);
+    opacity: 1;
+    z-index: 0;
+  }
+}
+
+@keyframes slidedownandheight {
+  0% {
+    max-height: 0;
+    opacity: 0;
+    z-index: -1;
+  }
+  99% {
+    z-index: -1;
+  }
+  100% {
+    max-height: 300px;
+    opacity: 1;
+    z-index: 0;
+  }
+}
+
+@keyframes slidedownusername {
+  0% {
+    max-height: 0;
+    opacity: 0;
+  }
+  100% {
+    max-height: 300px;
+    opacity: 1;
+    padding-top: 45px;
+  }
+}
+
+@keyframes slideupandheight {
+  0% {
+    max-height: 300px;
+    z-index: 0;
+  }
+  15% {
+    max-height: 0;
+  }
+  99% {
+    z-index: -1;
+  }
+  100% {
+    max-height: 0;
+    opacity: 0;
+    z-index: -1;
+  }
+}
+
+/* var(--page-size-m) = 665px - vars not usable in queries */
+@media (min-width: 665px) {
+  @keyframes slideup {
+    0% {
+      margin-top: var(--between-steps-margin);
+      z-index: -1;
+    }
+    100% {
+      margin-top: var(--presumed-step-height);
+      opacity: 0;
+      z-index: -1;
+    }
+  }
+}
diff --git a/webcompat/static/css/src/issue-wizard-popup.css b/webcompat/static/css/src/issue-wizard-popup.css
index 5e14eab28..2fffda259 100644
--- a/webcompat/static/css/src/issue-wizard-popup.css
+++ b/webcompat/static/css/src/issue-wizard-popup.css
@@ -7,6 +7,16 @@
 * variable.css
 */
 
+:root {
+  --popup-height: 450px;
+  --popup-height-mobile: 90vh;
+  --popup-max-height-mobile: 550px;
+}
+
+.full-height {
+  height: 100%;
+}
+
 .popup-overlay {
   background-color: rgba(0, 0, 0, .65);
   display: none;
@@ -22,15 +32,13 @@
   display: block;
 }
 
-.popup-trigger {
-  display: inline-block;
-}
-
 .popup-modal {
   background-color: #fff;
   border-radius: 5px;
-  height: 450px;
+  height: var(--popup-height-mobile);
   left: 50%;
+  max-height: var(--popup-max-height-mobile);
+  max-width: 90%;
   opacity: 0;
   overflow: hidden;
   padding: 0;
@@ -76,18 +84,19 @@
 }
 
 .popup-text {
-  font-size: 18px;
-  padding: 0 16px;
+  font-size: 14px;
+  line-height: 1.7;
+  padding: 35px 16px 16px;
 }
 
 .popup-text h2 {
   font-size: 32px;
   font-weight: 300;
-  margin-bottom: 38px;
+  margin-bottom: 15px;
 }
 
 .popup-modal .links {
-  padding-top: 32px;
+  padding-top: 22px;
   text-align: center;
 }
 
@@ -95,3 +104,21 @@
   color: var(--link-color);
   font-size: 16px;
 }
+
+/* var(--page-size-m) = 665px - vars not usable in queries */
+@media (min-width: 665px) {
+  .popup-modal {
+    height: var(--popup-height);
+  }
+
+  .popup-text {
+    font-size: 18px;
+    line-height: 1.8;
+    padding: 0 16px;
+  }
+
+  .popup-text h2 {
+    margin-bottom: 20px;
+    margin-top: 12px;
+  }
+}
diff --git a/webcompat/static/css/src/issue-wizard-slider.css b/webcompat/static/css/src/issue-wizard-slider.css
index 1ec7d5e33..4b7c8d268 100644
--- a/webcompat/static/css/src/issue-wizard-slider.css
+++ b/webcompat/static/css/src/issue-wizard-slider.css
@@ -13,14 +13,14 @@
   --slider-text-transition: all .5s .2s;
   --slider-image-transition: all .5s .3s;
   --slide-height: 350px;
-}
-
-.full-height {
-  height: 100%;
+  --slide-image-container-height: 450px;
+  --slide-height-mobile: 75vh;
+  --slide-max-height-mobile: 450px;
 }
 
 .slider .slides {
-  min-height: var(--slide-height);
+  height: var(--slide-height-mobile);
+  max-height: var(--slide-max-height-mobile);
   position: relative;
 }
 
@@ -39,28 +39,36 @@
 }
 
 .slider .text-half {
-  width: 60%;
+  width: 100%;
+}
+
+.slides .slide .full-height {
+  max-height: 75%;
 }
 
-.slider .slide .text-half .title {
-  font-size: 32px;
+.slider .slide .title {
+  font-family: "Source Sans Pro", "Open Sans", sans-serif;
+  font-size: 25px;
+  font-weight: 300;
   left: var(--slider-animation-distance);
+  line-height: normal;
   margin-top: 10px;
   opacity: 0;
-  padding: 16px;
+  padding: 16px 50px 16px 16px;
   position: relative;
   text-align: left;
   transition: var(--slider-title-transition);
 }
 
-.slider .slide.active .text-half .title {
+.slider .slide.active .title {
   left: 0;
   opacity: 1;
 }
 
 .slider .slide .text-half .text {
-  font-size: 18px;
+  font-size: 14px;
   left: var(--slider-animation-distance);
+  line-height: 1.7;
   margin-top: 20px;
   opacity: 0;
   padding: 16px;
@@ -78,25 +86,43 @@
   align-items: center;
   display: flex;
   justify-content: center;
+  order: -1;
   position: relative;
-  width: 40%;
+  width: 100%;
+}
+
+.image-half.image-only {
+  margin-top: 34px;
+}
+
+.image-half.image-only img {
+  max-width: auto;
 }
 
 .slider .slide .image-half::before {
   background-color: var(--upload-background);
-  border-bottom-left-radius: 50%;
-  border-top-left-radius: 50%;
+  border-radius: 50%;
   content: "";
-  height: 140%;
-  left: 0;
+  height: 80%;
+  left: -5%;
   position: absolute;
-  top: -20%;
-  width: 100%;
+  top: 10%;
+  transition: transform 1s;
+  width: 110%;
   z-index: -1;
 }
 
+.slider .slide:nth-child(2).active .image-half::before {
+  transform: rotate(-15deg);
+}
+
+.slider .slide:nth-child(3).active .image-half::before {
+  transform: rotate(15deg);
+}
+
 .slider .slide .image-half img {
   left: var(--slider-animation-distance);
+  max-width: 60%;
   opacity: 0;
   position: relative;
   transition: var(--slider-image-transition);
@@ -149,3 +175,72 @@
 .controls .btn.close-control {
   display: none;
 }
+
+/* var(--page-size-m) = 665px - vars not usable in queries */
+@media (min-width: 665px) {
+  .slider .slides {
+    height: var(--slide-height);
+    max-height: auto;
+  }
+
+  .slider .text-half {
+    width: 60%;
+  }
+
+  .slider .slide .title {
+    padding: 16px;
+  }
+
+  .slides .slide .full-height {
+    max-height: auto;
+  }
+
+  .slider .slide .text-half .title {
+    font-size: 32px;
+  }
+
+  .slider .slide .text-half .text {
+    font-size: 18px;
+    line-height: 1.6;
+  }
+
+  .slider .slide .image-half {
+    align-items: center;
+    display: flex;
+    height: var(--slide-image-container-height);
+    justify-content: center;
+    order: 0;
+    position: relative;
+    width: 40%;
+  }
+
+  .image-half.image-only {
+    margin-top: 0;
+  }
+
+  .slider .slide .image-half::before {
+    background-color: var(--upload-background);
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    content: "";
+    height: 130%;
+    left: 0;
+    position: absolute;
+    top: -15%;
+    width: 100%;
+    z-index: -1;
+  }
+
+  .slider .slide:nth-child(2).active .image-half::before,
+  .slider .slide:nth-child(3).active .image-half::before {
+    transform: none;
+  }
+
+  .slider .slide .image-half img {
+    left: var(--slider-animation-distance);
+    max-width: 100%;
+    opacity: 0;
+    position: relative;
+    transition: var(--slider-image-transition);
+  }
+}
diff --git a/webcompat/static/css/src/issue-wizard-textarea.css b/webcompat/static/css/src/issue-wizard-textarea.css
new file mode 100644
index 000000000..8bab57c7f
--- /dev/null
+++ b/webcompat/static/css/src/issue-wizard-textarea.css
@@ -0,0 +1,71 @@
+/*
+* textarea with progress bar
+*
+----------------
+* DEPENDENCIES:
+----------------
+* variables.css
+*/
+
+.progress-textarea textarea {
+  border: none;
+  flex: 1;
+  font-size: 14px;
+  font-weight: 200;
+  line-height: 1.86;
+  margin-bottom: 30px;
+  min-height: 150px;
+  padding: 10px;
+  resize: none;
+  width: 100%;
+}
+
+.progress-textarea .text-field {
+  font-weight: 200;
+}
+
+.progress-textarea .progress {
+  background: #b3f4d7;
+  border-radius: 2px;
+  bottom: 0;
+  content: "";
+  height: 20px;
+  left: 0;
+  margin: 4px;
+  overflow: hidden;
+  position: absolute;
+  width: calc(100% - 8px);
+  z-index: 2;
+}
+
+.progress-textarea .progress .bar {
+  background: #22b573;
+  bottom: 0;
+  content: "";
+  height: 20px;
+  left: 0;
+  min-width: 1%;
+  position: absolute;
+  transition: width .3s ease-out;
+  width: 1%;
+  z-index: 1;
+}
+
+.progress-textarea .progress .tick {
+  left: calc(50% - 6px);
+  opacity: 0;
+  position: absolute;
+  top: 3px;
+  width: 12px;
+  z-index: 2;
+}
+
+.progress-textarea .progress.complete .tick {
+  animation-duration: .25s;
+  animation-fill-mode: forwards;
+  animation-name: validated;
+}
+
+.char-limit {
+  font-size: 12px;
+}
diff --git a/webcompat/static/css/src/issue-wizard.css b/webcompat/static/css/src/issue-wizard.css
index ddc16aa30..7c2e2a5ae 100644
--- a/webcompat/static/css/src/issue-wizard.css
+++ b/webcompat/static/css/src/issue-wizard.css
@@ -7,9 +7,11 @@
 * variable.css
 */
 
-@import "../src/variables.css";
-@import "../src/issue-wizard-popup.css";
-@import "../src/issue-wizard-slider.css";
+@import "./variables.css";
+@import "./issue-wizard-popup.css";
+@import "./issue-wizard-slider.css";
+@import "./issue-wizard-textarea.css";
+@import "./issue-wizard-animations.css";
 
 :root {
   --between-steps-margin: 53px;
@@ -45,20 +47,20 @@
 
 .issue-form {
   background: transparent;
-  margin-top: 35px;
 }
 
 #wizard-container {
   background-color: var(--base-colorDark);
   display: flex;
   justify-content: space-evenly;
-  margin-top: -35px;
-  padding: 1rem 0;
+  margin-left: calc(var(--grid-outermargin-s) * -1);
+  margin-top: -37px;
+  padding: .5rem 0 1.5rem;
   position: fixed;
   top: 75px;
   transform: none;
   transition: top 400ms ease;
-  width: 100%;
+  width: calc(100% + var(--grid-outermargin-s));
   z-index: 31;
 }
 
@@ -82,17 +84,17 @@
 }
 
 .step::after {
-  background: var(--base-background);
+  background: var(--dot-color);
   content: "";
   height: 2px;
   left: 50%;
   position: absolute;
-  top: 23px;
-  width: calc(100% + 15px);
+  top: 11px;
+  width: calc(100%);
   z-index: 0;
 }
 
-.step:last-of-type::after {
+.step.last::after {
   display: none;
 }
 
@@ -101,7 +103,18 @@
   transition: padding .15s;
 }
 
+.step + .description {
+  display: none;
+  font-size: 14px;
+  left: 0;
+  position: absolute;
+  text-align: center;
+  top: 25px;
+  width: calc(100% - var(--grid-outermargin-s));
+}
+
 .step .description {
+  display: none;
   font-size: 14px;
 }
 
@@ -109,6 +122,10 @@
   font-weight: 600;
 }
 
+.step.active + .description {
+  display: block;
+}
+
 #description {
   display: none;
 }
@@ -124,19 +141,19 @@
 
 .step .circle {
   align-items: center;
-  background-color: var(--wizard-step-empty);
-  border: 2px solid var(--base-background);
+  background-color: var(--dot-color);
+  border: none;
   border-radius: 50%;
   color: var(--color-second);
   display: flex;
   font-weight: 600;
-  height: 36px;
+  height: 12px;
   justify-content: center;
   margin-bottom: 7px;
   position: relative;
   text-align: center;
   transition: all .25s;
-  width: 36px;
+  width: 12px;
   z-index: 1;
 }
 
@@ -146,38 +163,49 @@
   color: var(--wizard-step-color);
 }
 
-.step .number {
-  font-size: 1rem;
+.step.complete .circle {
+  background-color: var(--warning-border);
+  border: 2px solid var(--dot-color);
+  overflow: hidden;
 }
 
-.step.active .number,
-.step.complete .number {
+.step .number {
   display: none;
+  font-size: 1rem;
 }
 
 .step.active .circle {
-  height: 48px;
+  background-color: var(--wizard-step-empty);
+  border: 2px solid var(--dot-color);
+  height: 16px;
   margin-bottom: 1px;
-  width: 48px;
+  width: 16px;
 }
 
 .step.active .icon {
   content: url("../../img/svg/icons/svg-pin.svg");
+  display: none;
   height: auto;
   width: 18px;
 }
 
 .step.complete .icon {
   content: url("../../img/svg/icons/svg-arrowhead-right.svg");
+  display: none;
   height: auto;
   width: 8px;
 }
 
+.step.active .number,
+.step.complete .number {
+  display: none;
+}
+
 .page-heading {
   color: var(--color-second);
-  font-size: 32px;
+  font-size: 23px;
   font-weight: 300;
-  margin: 20px;
+  margin: 0;
   text-align: center;
   width: 100%;
 }
@@ -194,7 +222,7 @@
 }
 
 .step-container:not(.step1) {
-  animation-duration: .4s;
+  animation-duration: .1s;
   animation-fill-mode: forwards;
   animation-name: slideup;
   margin-top: var(--presumed-step-height);
@@ -227,6 +255,15 @@
   margin-top: 0;
 }
 
+.issue-form .form-label {
+  margin-bottom: 8px;
+  width: 100%;
+}
+
+.issue-form .form-label.big {
+  margin-bottom: 20px;
+}
+
 .issue-disclaimer {
   background-color: var(--base-background);
   border-radius: 5px;
@@ -239,23 +276,28 @@
 
 .choice-control ul {
   display: flex;
-  justify-content: space-between;
+  flex-wrap: wrap;
+  justify-content: flex-start;
 }
 
 .step-container.subproblem ul {
   display: flex;
 }
 
+.form-element {
+  margin: 0 0 5px;
+}
+
 .step2 .form-element {
   width: 100%;
 }
 
 .custom-browser .form-element:nth-child(odd) {
-  margin-right: 16px;
+  margin-right: 0;
 }
 
 .custom-browser .form-element:nth-child(even) {
-  margin-left: 16px;
+  margin: 16px 0 0;
 }
 
 .other-problem,
@@ -267,9 +309,19 @@
   max-height: 0;
   opacity: 0;
   overflow: hidden;
+  padding: 10px;
   width: 100%;
 }
 
+.other-problem .form-label,
+.other-browser .form-label {
+  margin-bottom: 0;
+}
+
+.other-browser {
+  padding-top: 0;
+}
+
 .other-problem:not(.button-control) {
   max-width: 400px;
 }
@@ -286,15 +338,13 @@
 .input-control {
   display: flex;
   justify-content: center;
-  padding: 25px 20px 14px 20px;
+  padding: 10px;
   position: relative;
   width: 100%;
 }
 
-.input-control.half,
-.row.half {
-  position: relative;
-  width: 50%;
+.button-control .input-control {
+  padding: 0;
 }
 
 .input-control .bordered-container {
@@ -306,6 +356,10 @@
   z-index: 2;
 }
 
+.row.mobile-col {
+  flex-direction: column;
+}
+
 .row.centered {
   justify-content: center;
   margin: 0 auto;
@@ -333,11 +387,11 @@
 
 .input-control .input-description {
   color: var(--color-second);
-  font-size: 18px;
+  font-size: 16px;
   letter-spacing: normal;
-  line-height: 1.56;
+  line-height: 1.75;
   margin-bottom: 12px;
-  text-align: center;
+  text-align: left;
 }
 
 .form-message-error {
@@ -351,20 +405,31 @@
   color: var(--link-color);
 }
 
+.step1 .hero {
+  order: -1;
+}
+
+.step-container.step1 {
+  background: transparent;
+  box-shadow: none;
+  margin-top: 0;
+}
+
 .protruding-img {
-  position: absolute;
-  top: -30px;
+  max-width: 70%;
 }
 
 .button-control {
-  background-color: var(--wizard-grey-bg);
-  border-top: 1px solid var(--button-box-border);
+  background-color: transparent;
+  border-top: none;
   width: 100%;
 }
 
-.text-field {
-  font-weight: 600;
-  padding: 11px 24px 11px 8px;
+.issue-form .text-field {
+  border-color: var(--screenshot-shadow);
+  font-size: 14px;
+  font-weight: 200;
+  padding: 4px 24px 5px 8px;
 }
 
 .with-validation-icons.is-validated::after,
@@ -377,17 +442,17 @@
   background-repeat: no-repeat;
   background-size: 50%;
   border-radius: 50%;
-  bottom: 8px;
+  bottom: 4px;
   content: "";
   display: flex;
-  height: 24px;
+  height: 19px;
   justify-content: center;
   opacity: 0;
   position: absolute;
   right: 8px;
   top: auto;
   transition: opacity .2s;
-  width: 24px;
+  width: 19px;
   z-index: 2;
 }
 
@@ -435,7 +500,7 @@
   background-color: var(--wizard-step-color);
   border: 1px solid var(--wizard-step-error);
   color: var(--wizard-step-error);
-  margin-left: 20px;
+  margin-left: 0;
 }
 
 .issue-btn.disabled,
@@ -443,15 +508,16 @@
   opacity: .5;
 }
 
+.spaced-link {
+  margin-bottom: 16px;
+}
+
 .choice-control {
   margin-bottom: 0;
 }
 
-.issue-form [type = "radio"] {
-  height: 0;
-  opacity: 0;
-  position: absolute;
-  width: 0;
+.subproblem .choice-control {
+  display: none;
 }
 
 .choice-control .icon-container {
@@ -460,12 +526,12 @@
   border-radius: 5px;
   cursor: pointer;
   display: flex;
-  height: 92px;
+  height: 69px;
   justify-content: center;
-  margin: 0 auto 14px;
+  margin: 0 auto 5px;
   position: relative;
   transition: border .07s;
-  width: 92px;
+  width: 72px;
 }
 
 .choice-control .icon-container:hover {
@@ -503,6 +569,10 @@
   max-width: 100%;
 }
 
+.device-data-hero {
+  display: none;
+}
+
 .final-step .button img {
   margin-right: 8px;
 }
@@ -521,10 +591,14 @@
 }
 
 .choice-control li {
-  font-size: 16px;
-  line-height: 23px;
-  padding: 20px;
-  width: 20%;
+  font-size: 12px;
+  line-height: 15px;
+  padding: 0 10px 20px;
+  width: 50%;
+}
+
+.issue-form [type = "radio"] {
+  display: none;
 }
 
 .issue-form [type = "radio"]:checked + label .icon-container,
@@ -566,13 +640,24 @@
   width: 28px;
 }
 
+#browsers li {
+  width: 33%;
+}
+
+.no-other-browser {
+  line-height: 22px;
+  margin-bottom: 16px;
+  padding: 0 10px;
+}
+
 .device-data {
-  padding: 45px 20px 34px 20px;
-  width: 70%;
+  padding: 10px;
+  width: 100%;
 }
 
-.device-data-hero {
-  width: 40%;
+.other-option {
+  line-height: 22px;
+  padding: 10px;
 }
 
 .device-data .input-description {
@@ -581,24 +666,25 @@
 
 .warning {
   animation-name: slideup;
-  border: 5px solid var(--warning-border);
+  border: 4px solid var(--warning-border);
   border-radius: 5px;
   display: flex;
   justify-content: center;
   margin: 0 auto;
   opacity: 0;
-  padding-bottom: 22px;
-  width: 66%;
+  padding-bottom: 6px;
+  width: 100%;
 }
 
 .warning .warning-icon {
-  margin-top: 16px;
+  margin: 16px auto 0;
+  width: 32px;
 }
 
 .warning .warning-text {
-  font-size: 18px;
-  line-height: 1.56;
-  margin: 16px 50px;
+  font-size: 16px;
+  line-height: 1.75;
+  margin: 6px 10px;
 }
 
 .warning .input-control {
@@ -613,72 +699,15 @@
   width: 100%;
 }
 
-.problem-description textarea {
-  border: none;
-  flex: 1;
-  font-weight: 200;
-  height: 100px;
-  margin-bottom: 30px;
-  padding: 10px;
-  resize: none;
-  width: 100%;
-}
-
 .problem-description .text-field:focus {
   border: none;
 }
 
-.problem-description .progress {
-  background: #b3f4d7;
-  border-radius: 2px;
-  bottom: 0;
-  content: "";
-  height: 20px;
-  left: 0;
-  margin: 4px;
-  overflow: hidden;
-  position: absolute;
-  width: calc(100% - 8px);
-  z-index: 2;
-}
-
-.problem-description .progress .bar {
-  background: #22b573;
-  bottom: 0;
-  content: "";
-  height: 20px;
-  left: 0;
-  min-width: 1%;
-  position: absolute;
-  transition: width .3s ease-out;
-  width: 1%;
-  z-index: 1;
-}
-
-.problem-description .progress .tick {
-  left: calc(50% - 6px);
-  opacity: 0;
-  position: absolute;
-  top: 3px;
-  width: 12px;
-  z-index: 2;
-}
-
-.problem-description .progress.complete .tick {
-  animation-duration: .25s;
-  animation-fill-mode: forwards;
-  animation-name: validated;
-}
-
-.char-limit {
-  font-size: 12px;
-}
-
 .description-text {
-  font-size: 18px;
+  font-size: 16px;
   line-height: 28px;
-  padding-bottom: 25px;
-  padding-top: 120px;
+  padding-bottom: 0;
+  padding-top: 0;
   text-align: left;
 }
 
@@ -710,7 +739,6 @@
 .upload-screenshot .form-upload {
   background-color: var(--upload-background);
   border: 1px dashed var(--warm-grey);
-  min-height: 300px;
 }
 
 .upload-screenshot .form-upload .label-icon-message {
@@ -727,11 +755,11 @@
 }
 
 .final-step .header .input-description {
-  font-size: 32px;
-  font-weight: 200;
-  padding: 35px 0;
+  font-size: 16px;
+  font-weight: 600;
+  padding: 6px 10px;
   text-align: left;
-  width: 73%;
+  width: 100%;
 }
 
 .final-step .button-control {
@@ -739,6 +767,7 @@
 }
 
 .final-step-hero {
+  display: none;
   margin: 0 4%;
   width: 22%;
 }
@@ -750,27 +779,35 @@
 }
 
 .final-text {
-  font-size: 18px;
+  font-size: 16px;
   margin-bottom: 24px;
+  padding: 10px 10px 0;
+  text-align: left;
 }
 
 #submitgithub {
-  margin-right: 16px;
+  margin-bottom: 16px;
+  margin-right: 0;
 }
 
 .optional-username {
   animation-duration: .5s;
-  font-size: 18px;
-  padding-top: 5px;
+  font-size: 16px;
+  text-align: left;
   width: 100%;
 }
 
 .optional-username .column.narrow {
   margin: 0 auto;
   max-width: 400px;
+  text-align: left;
   width: 100%;
 }
 
+.mobile-only {
+  display: inline-block;
+}
+
 .optional-username .label {
   display: flex;
   flex-wrap: wrap;
@@ -788,9 +825,12 @@
 
 .optional-username .label .right-label {
   flex: 1;
+  font-size: 12px;
   font-weight: 200;
   justify-self: flex-end;
+  margin-top: 10px;
   text-align: right;
+  text-transform: capitalize;
 }
 
 .final-step .button:not(#submitanon) {
@@ -799,122 +839,360 @@
   padding: 8px 23px;
 }
 
-@keyframes validated {
-  0% {
-    opacity: 0;
-    transform: scale(.8);
+.final-step .button#open-username {
+  justify-content: center;
+  padding: 11px 23px;
+}
+
+#submitanon {
+  margin-top: 16px;
+}
+
+/*
+* Desktop style overrides
+*
+* var(--page-size-m) = 665px - vars not usable in queries */
+@media (min-width: 665px) {
+  .half {
+    width: 50%;
   }
-  50% {
-    transform: scale(1.3);
+
+  .issue-form {
+    margin-top: 35px;
   }
-  100% {
-    opacity: 1;
-    transform: scale(1);
+
+  .input-control.half,
+  .row.half {
+    position: relative;
+    width: 50%;
+  }
+
+  .row.mobile-col {
+    flex-direction: row;
   }
-}
 
-@keyframes slidedown {
-  0% {
-    opacity: 0;
-    z-index: -1;
+  #wizard-container {
+    margin-left: calc(var(--grid-outermargin-m) * -1);
+    margin-top: -35px;
+    padding: 1rem 0;
+    width: calc(100% + var(--grid-outermargin-m) * 2);
   }
-  99% {
-    z-index: -1;
+
+  #js-ReportForm {
+    padding: 40px 10px 0;
   }
-  100% {
-    margin-top: var(--between-steps-margin);
-    opacity: 1;
-    z-index: 0;
+
+  .step .circle {
+    background-color: var(--wizard-step-empty);
+    border: 2px solid var(--base-background);
+    height: 36px;
+    width: 36px;
+    z-index: 1;
+  }
+
+  .step .number {
+    display: block;
+  }
+
+  .step.active .icon,
+  .step.complete .icon {
+    display: block;
+  }
+
+  .step.active .circle {
+    background-color: var(--wizard-step-complete);
+    border: 2px solid var(--base-background);
+    height: 48px;
+    top: 0;
+    width: 48px;
+  }
+
+  .step.complete .circle {
+    background-color: var(--wizard-step-complete);
+    border: 2px solid var(--base-background);
+  }
+
+  .step .description {
+    display: block;
+  }
+
+  .step::after {
+    background: var(--base-background);
+    top: 23px;
+    width: calc(100% + 15px);
+  }
+
+  .step.active + .description {
+    display: none;
+  }
+
+  .form-element {
+    margin: 0 0 20px;
+  }
+
+  .issue-form .form-label.big {
+    font-size: 18px;
+    margin-bottom: 8px;
+    text-align: center;
+  }
+
+  .custom-browser .form-label {
+    font-weight: 600;
+    margin-bottom: 5px;
+  }
+
+  .final-step .form-label {
+    margin-bottom: 0;
+    margin-top: 10px;
+    width: auto;
+  }
+
+  .other-browser .form-label {
+    margin-bottom: 5px;
+  }
+
+  #js-ReportForm .form-label {
+    margin-bottom: 5px;
+    width: auto;
+  }
+
+  .custom-browser .form-element:nth-child(odd) {
+    margin-right: 16px;
+  }
+
+  .custom-browser .form-element:nth-child(even) {
+    margin: 0 0 20px 16px;
   }
-}
 
-@keyframes slideup {
-  0% {
-    margin-top: var(--between-steps-margin);
-    z-index: -1;
+  .page-heading {
+    font-size: 32px;
+    margin: 20px;
   }
-  100% {
+
+  .step1 .hero {
+    order: 0;
+  }
+
+  .protruding-img {
+    position: absolute;
+    top: -30px;
+  }
+
+  .step-container.step1 {
+    background-color: var(--base-background);
+    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2);
+    margin-top: 23px;
+  }
+
+  .step-container:not(.step1) {
+    animation-duration: .4s;
     margin-top: var(--presumed-step-height);
-    opacity: 0;
-    z-index: -1;
   }
-}
 
-@keyframes slideupbig {
-  0% {
-    margin-top: var(--between-steps-margin);
-    z-index: -1;
+  .input-control {
+    padding: 25px 20px 14px 20px;
   }
-  100% {
-    margin-top: var(--presumed-high-step-height);
-    opacity: 0;
-    z-index: -1;
+
+  .input-control .input-description {
+    font-size: 18px;
+    line-height: 1.56;
+    margin-bottom: 12px;
+    text-align: center;
   }
-}
 
-@keyframes slideupdown {
-  0% {
-    margin-top: var(--between-steps-margin);
-    opacity: 1;
-    z-index: -1;
+  .mobile-only {
+    display: none;
   }
-  50% {
-    margin-top: var(--presumed-step-height-updown);
-    opacity: 0;
-    z-index: -1;
+
+  .issue-form .text-field {
+    border-color: var(--color-form);
+    font-size: 90%;
+    font-weight: 600;
+    padding: 11px 24px 11px 8px;
   }
-  99% {
-    z-index: -1;
+
+  .low .text-field {
+    border-radius: 2px;
+    color: var(--color-second);
+    font-weight: 200;
+    margin-bottom: 17px;
+    padding: 5px 24px 7px 8px;
   }
-  100% {
-    margin-top: var(--between-steps-margin);
-    opacity: 1;
-    z-index: 0;
+
+  .button-control {
+    background-color: var(--wizard-grey-bg);
+    border-top: 1px solid var(--button-box-border);
   }
-}
 
-@keyframes slidedownandheight {
-  0% {
-    max-height: 0;
-    opacity: 0;
-    z-index: -1;
+  .button-control .input-control {
+    padding: 25px 0 14px 0;
   }
-  99% {
-    z-index: -1;
+
+  .with-validation-icons.is-validated::after,
+  .with-validation-icons.is-error::before {
+    bottom: 8px;
+    height: 24px;
+    right: 8px;
+    width: 24px;
   }
-  100% {
-    max-height: 300px;
-    opacity: 1;
-    z-index: 0;
+
+  .low.is-validated::after,
+  .low.is-error::before {
+    bottom: 22px;
+    height: 20px;
+    width: 20px;
   }
-}
 
-@keyframes slidedownusername {
-  0% {
-    max-height: 0;
-    opacity: 0;
+  .custom-browser .low.is-validated::after,
+  .custom-browser .low.is-error::before {
+    bottom: 22px;
+    right: 8px;
   }
-  100% {
-    max-height: 300px;
-    opacity: 1;
-    padding-top: 45px;
+
+  .choice-control ul {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: center;
+  }
+
+  .choice-control li {
+    font-size: 16px;
+    line-height: 23px;
+    padding: 20px;
+    width: 20%;
+  }
+
+  .choice-control .icon-container {
+    height: 92px;
+    margin: 0 auto 14px;
+    width: 92px;
+  }
+
+  #browsers li {
+    width: 50%;
+  }
+
+  .device-data {
+    padding: 45px 20px 34px 20px;
+    width: 70%;
+  }
+
+  .device-data-hero {
+    display: flex;
+    width: 40%;
+  }
+
+  .device-data .input-description {
+    text-align: left;
+  }
+
+  .other-option,
+  .no-other-browser {
+    margin-bottom: 6px;
+    padding: 0;
+  }
+
+  .no-other-browser {
+    line-height: 28px;
+    margin-bottom: 0;
+    padding: 0;
+  }
+
+  .other-problem,
+  .other-browser,
+  .optional-username {
+    padding: 0;
+  }
+
+  .warning {
+    border: 5px solid var(--warning-border);
+    justify-content: center;
+    padding-bottom: 22px;
+    width: 66%;
+  }
+
+  .warning .warning-icon {
+    width: auto;
+  }
+
+  .warning .warning-text {
+    font-size: 18px;
+    line-height: 1.56;
+    margin: 16px 50px;
+  }
+
+  .description-text {
+    font-size: 18px;
+    padding-bottom: 25px;
+    padding-top: 120px;
+  }
+
+  .progress-textarea textarea {
+    font-size: 16px;
+    line-height: 1.75;
+  }
+
+  .issue-btn {
+    min-width: 140px;
+  }
+
+  .issue-btn.red {
+    margin-left: 20px;
   }
-}
 
-@keyframes slideupandheight {
-  0% {
-    max-height: 300px;
-    z-index: 0;
+  .upload-screenshot .form-upload {
+    min-height: 260px;
   }
-  15% {
-    max-height: 0;
+
+  .spaced-link {
+    margin-bottom: 0;
   }
-  99% {
-    z-index: -1;
+
+  .final-step-hero {
+    display: flex;
   }
-  100% {
-    max-height: 0;
-    opacity: 0;
-    z-index: -1;
+
+  .final-step .header .input-description {
+    font-size: 32px;
+    font-weight: 200;
+    padding: 35px 0;
+    width: 73%;
+  }
+
+  .final-text {
+    font-size: 18px;
+    margin-bottom: 24px;
+    padding: 0;
+    text-align: center;
+  }
+
+  #submitgithub {
+    margin-right: 16px;
+  }
+
+  .final-step .button#open-username {
+    margin-bottom: 16px;
+    padding: 8px 23px;
+  }
+
+  .optional-username {
+    font-size: 18px;
+    padding-top: 5px;
+    text-align: center;
+    width: 100%;
+  }
+
+  #submitanon {
+    margin-top: 0;
+  }
+
+  .optional-username .label .right-label {
+    font-size: 16px;
+    margin-top: 0;
+    text-transform: none;
+  }
+
+  .label-upload {
+    width: 100%;
   }
 }
diff --git a/webcompat/static/js/lib/issue-wizard-slider.js b/webcompat/static/js/lib/issue-wizard-slider.js
index 38e26e619..9f2566f00 100644
--- a/webcompat/static/js/lib/issue-wizard-slider.js
+++ b/webcompat/static/js/lib/issue-wizard-slider.js
@@ -12,6 +12,7 @@ function Slider() {
   };
 
   this.sliderHandler = function() {
+    var slider = document.querySelectorAll(".slider");
     var nextBtn = document.querySelectorAll(".slider .next");
     var prevBtn = document.querySelectorAll(".slider .prev");
     var dot = document.querySelectorAll(".slider .dot");
@@ -20,6 +21,8 @@ function Slider() {
     var controlFinish = document.querySelector(
       ".slider .controls .close-control"
     );
+    var touchstartX = 0;
+    var touchendX = 0;
     // Intercepted popup close buttons that trigger the return to first slide
     var closeButtons = document.querySelectorAll(".popup-modal__close");
     var index = 0;
@@ -41,29 +44,37 @@ function Slider() {
       }
     };
 
+    var nextSlide = function() {
+      index++;
+      if (index >= slide.length) {
+        index--;
+        return false;
+      }
+      slide[index - 1].classList.remove("active");
+      slide[index].classList.add("active");
+      setActiveControls(index);
+    };
+
+    var prevSlide = function() {
+      index--;
+      if (index < 0) {
+        index = 0;
+        return false;
+      }
+      slide[index + 1].classList.remove("active");
+      slide[index].classList.add("active");
+      setActiveControls(index);
+    };
+
     prevBtn.forEach(function(btn) {
       btn.addEventListener("click", function() {
-        index--;
-        if (index < 0) {
-          index = 0;
-          return false;
-        }
-        slide[index + 1].classList.remove("active");
-        slide[index].classList.add("active");
-        setActiveControls(index);
+        prevSlide();
       });
     });
 
     nextBtn.forEach(function(btn) {
       btn.addEventListener("click", function() {
-        index++;
-        if (index >= slide.length) {
-          index--;
-          return false;
-        }
-        slide[index - 1].classList.remove("active");
-        slide[index].classList.add("active");
-        setActiveControls(index);
+        nextSlide();
       });
     });
 
@@ -85,6 +96,22 @@ function Slider() {
         setActiveControls(index);
       });
     });
+
+    function handleGesure() {
+      if (touchendX < touchstartX) nextSlide();
+      if (touchendX > touchstartX) prevSlide();
+    }
+
+    slider.forEach(function(s) {
+      s.addEventListener("touchstart", e => {
+        touchstartX = e.changedTouches[0].screenX;
+      });
+
+      s.addEventListener("touchend", e => {
+        touchendX = e.changedTouches[0].screenX;
+        handleGesure();
+      });
+    });
   };
 
   return this.init();
diff --git a/webcompat/templates/home-page/issue-wizard-form.html b/webcompat/templates/home-page/issue-wizard-form.html
index dd6ff1767..2a6b43818 100644
--- a/webcompat/templates/home-page/issue-wizard-form.html
+++ b/webcompat/templates/home-page/issue-wizard-form.html
@@ -11,12 +11,19 @@ <h1 class="headline-1">Report Site Issue</h1>
 >
   <h3 class="page-heading">Filing a web compatibility issue</h3>
   <div class="step-container step1 col open" data-nextstep="2" data-activate-stepper="2">
-    <div class="row">
+    <div class="row mobile-col">
       <div class="input-control half">
         <div class="col">
           <div class="input-description">
-            Thank you for filing a web compatibility issue.<br>
-            Do we have the <strong>correct site?</strong>
+            {% if request.args.get('url') %}
+              Thank you for filing a web compatibility issue.
+              <a href="#" class="popup-trigger mobile-only" data-popup-trigger="what-is-webcompat">Learn more</a>
+              <br>
+              Do we have the <strong>correct site?</strong>
+            {% else %}
+              <strong>Please enter the URL</strong> where you encountered the web compatibility issue.
+              <a href="#" class="popup-trigger mobile-only" data-popup-trigger="what-is-webcompat">Learn more</a>
+            {% endif %}
           </div>
           <div class="form-text form-element js-Form-group form-label-message with-validation-icons">
             {{ form.url.label(class_='form-label is-hidden') }}
@@ -32,7 +39,7 @@ <h3 class="page-heading">Filing a web compatibility issue</h3>
           </div>
         </div>
       </div>
-      <div class="input-control half">
+      <div class="input-control half hero">
         <img class="protruding-img" src="{{ url_for('static', filename='img/svg/reporting-people.svg') }}" title="Report" alt="Report" />
       </div>
     </div>
@@ -40,7 +47,7 @@ <h3 class="page-heading">Filing a web compatibility issue</h3>
       <div class="input-control half">
         <div class="col center">
           <button class="button next-step step-1 issue-btn disabled" data-nextstep="2">Confirm</button>
-          <a href="#" class="popup-trigger" data-popup-trigger="what-is-webcompat">Learn more about web compatibility</a>
+          <a href="#" class="popup-trigger desktop-only" data-popup-trigger="what-is-webcompat">Learn more about web compatibility</a>
         </div>
       </div>
     </div>
@@ -53,7 +60,7 @@ <h3 class="page-heading">Filing a web compatibility issue</h3>
       <div class="input-control">
         <div class="form-radio choice-control form-element js-Form-group">
           <div class="js-Form-information form-label-message">
-            <label class="form-label" for="problem_category">What is wrong with the page at <strong id="website-url">example.com</strong><strong>?</strong></label>
+            <label class="form-label big" for="problem_category">What is wrong with the page at <strong id="website-url">example.com</strong><strong>?</strong></label>
             {% if form.problem_category.errors %}
               {% for error in form.problem_category.errors %}
                 <small class="form-message-error">{{ error }}</small>
@@ -88,7 +95,7 @@ <h3 class="page-heading">Filing a web compatibility issue</h3>
       <div class="input-control">
         <div class="form-radio choice-control form-element js-Form-group site_bug_subcategory">
           <div class="js-Form-information form-label-message">
-            <label class="form-label" for="site_bug_subcategory">What is wrong with <strong>the video or audio?</strong></label>
+            <label class="form-label big" for="site_bug_subcategory">Why is the <strong>site not usable?</strong></label>
             {% if form.site_bug_subcategory.errors %}
               {% for error in form.site_bug_subcategory.errors %}
                 <small class="form-message-error">{{ error }}</small>
@@ -99,7 +106,7 @@ <h3 class="page-heading">Filing a web compatibility issue</h3>
         </div>
         <div class="form-radio choice-control form-element js-Form-group layout_bug_subcategory">
           <div class="js-Form-information form-label-message">
-            <label class="form-label" for="layout_bug_subcategory">What is wrong with <strong>the video or audio?</strong></label>
+            <label class="form-label big" for="layout_bug_subcategory">How is the <strong>design broken?</strong></label>
             {% if form.layout_bug_subcategory.errors %}
               {% for error in form.layout_bug_subcategory.errors %}
                 <small class="form-message-error">{{ error }}</small>
@@ -110,7 +117,7 @@ <h3 class="page-heading">Filing a web compatibility issue</h3>
         </div>
         <div class="form-radio choice-control form-element js-Form-group video_bug_subcategory">
           <div class="js-Form-information form-label-message">
-            <label class="form-label" for="video_bug_subcategory">What is wrong with <strong>the video or audio?</strong></label>
+            <label class="form-label big" for="video_bug_subcategory">What is wrong with <strong>the video or audio?</strong></label>
             {% if form.video_bug_subcategory.errors %}
               {% for error in form.video_bug_subcategory.errors %}
                 <small class="form-message-error">{{ error }}</small>
@@ -124,7 +131,7 @@ <h3 class="page-heading">Filing a web compatibility issue</h3>
   </div>
 
   <div class="step-container step4 col" data-nextstep="5" data-activate-stepper="4">
-    <div class="row">
+    <div class="row mobile-col">
       <div class="input-control device-data-hero">
         <img class="protruding-img" src="{{ url_for('static', filename='img/svg/devices.svg') }}" title="Device data image" alt="Device data image" />
       </div>
@@ -140,8 +147,8 @@ <h3 class="page-heading">Filing a web compatibility issue</h3>
       <div class="input-control">
         <div class="col center">
           <button class="button next-step step-4 issue-btn" data-nextstep="6" data-hidestep="5">Yes</button>
-          <div class="row">
-            I encountered the issue on a &nbsp;<a class="next-step step-5" data-nextstep="5" data-hidestep="6" href="#">different device or browser</a>
+          <div class="other-option">
+            I encountered the issue on a <a class="next-step step-5" data-nextstep="5" data-hidestep="6" href="#">different device or browser</a>
           </div>
         </div>
       </div>
@@ -155,7 +162,7 @@ <h3 class="page-heading">Filing a web compatibility issue</h3>
           <div class="input-description">
             <strong>What browser and device were you using</strong> when the issue was encountered?
           </div>
-          <div class="row">
+          <div class="row mobile-col">
             <div class="form-element js-Form-group low with-validation-icons half">
               {{ form.browser.label(class_='form-label') }}
               {{ form.browser(class_='form-field text-field') }}
@@ -182,7 +189,7 @@ <h3 class="page-heading">Filing a web compatibility issue</h3>
       <div class="input-control">
         <div class="form-radio choice-control browsers form-element js-Form-group">
           <div class="js-Form-information form-label-message">
-            <label class="form-label" for="browsers">Please select <strong>other browsers you have tested on</strong></label>
+            <label class="form-label big" for="browsers">Please select <strong>other browsers you have tested on</strong></label>
             {% if form.browsers.errors %}
               {% for error in form.browsers.errors %}
                 <small class="form-message-error">{{ error }}</small>
@@ -215,7 +222,7 @@ <h3 class="page-heading">Filing a web compatibility issue</h3>
 
   <div class="step-container warning step7 col" data-nextstep="8" data-activate-stepper="5">
     <img class="warning-icon" src="{{ url_for('static', filename='img/svg/icons/svg-info-icon.svg') }}" title="Warning" alt="Warning" />
-    <div class="warning-text">We recommend testing the website in another browser to validate this as a web compatibility issue.</div>
+    <div class="warning-text">We recommend testing the website in another browser to validate this as a <strong>web compatibility issue</strong>.</div>
     <div class="col center input-control">
       <button class="button next-step step-7 issue-btn" data-nextstep="8">Continue without testing</button>
       <a href="#" class="popup-trigger" data-popup-trigger="what-is-webcompat">What is a web compatibility issue?</a>
@@ -223,7 +230,7 @@ <h3 class="page-heading">Filing a web compatibility issue</h3>
   </div>
 
   <div class="step-container step8 col" data-nextstep="9" data-activate-stepper="6">
-    <div class="row">
+    <div class="row mobile-col">
       <div class="input-control device-data-hero half">
         <img class="protruding-img" src="{{ url_for('static', filename='img/svg/describe-issue.svg') }}" title="Describe issue" alt="Describe issue" />
         <div class="description-text">
@@ -233,7 +240,7 @@ <h3 class="page-heading">Filing a web compatibility issue</h3>
         </div>
       </div>
       <div class="input-control half col">
-        <div class="form-text form-element js-Form-group problem-description bordered-container">
+        <div class="form-text form-element js-Form-group problem-description progress-textarea bordered-container">
           {{ form.description() }}
           {{ form.steps_reproduce(class_='form-field text-field js-autogrow-field',
               rows=3, maxlength=200, placeholder="Describe what happened") }}
@@ -255,12 +262,12 @@ <h3 class="page-heading">Filing a web compatibility issue</h3>
   </div>
 
   <div class="step-container step10 col upload-screenshot" data-nextstep="11">
-    <div class="row">
+    <div class="row mobile-col">
       <div class="input-control half flex-left">
         <div class="description-text top up-message deleted-screenshot">
           <strong>We deleted the screenshot.</strong><br>
           Do you have a different screenshot you would like to share?<br>
-          <br>
+          <br class="desktop-only">
           <strong>Uploaded images are publicly viewable.</strong>
         </div>
         <div class="description-text top up-message uploaded-screenshot">
@@ -298,11 +305,11 @@ <h3 class="page-heading">Filing a web compatibility issue</h3>
     <div class="button-control row">
       <div class="input-control">
         <div class="col center">
-          <div class="row">
+          <div class="row mobile-col">
             <button class="button next-step step-10 issue-btn disabled" data-nextstep="11">Confirm</button>
             <button class="button js-remove-upload is-hidden issue-btn red">Delete this image</button>
           </div>
-          <a class="js-remove-upload is-hidden" href="#">Upload a different image</a>
+          <a class="js-remove-upload is-hidden spaced-link" href="#">Upload a different image</a>
         </div>
       </div>
     </div>
@@ -320,10 +327,10 @@ <h3 class="page-heading">Filing a web compatibility issue</h3>
     <div class="button-control row">
       <div class="input-control">
         <div class="col center">
-          <div class="row final-text">
+          <div class="final-text">
             Good job! You can&nbsp;<strong>report via GitHub</strong>&nbsp;or&nbsp;<strong>report anonymously</strong>.
           </div>
-          <div class="row">
+          <div class="row mobile-col">
             <button class="button button-secondary right js-Button" id="submitgithub" type="submit" name="github-auth-report">
               <img class="" src="{{ url_for('static', filename='img/svg/icons/svg-github-white.svg') }}" title="Report via GitHub" alt="Report via GitHub" />
               {% if session.username %}Report as {{ session.username }}{% else %}Report via GitHub{% endif %}
@@ -377,9 +384,10 @@ <h3 class="page-heading">Filing a web compatibility issue</h3>
   <div class="slider">
     <div class="slides">
       <div class="slide active">
-        <div class="row full-height">
+        <div class="title mobile-only">What is a web compatibility issue?</div>
+        <div class="row full-height mobile-col">
           <div class="text-half col">
-            <div class="title">What is a web compatibility issue?</div>
+            <div class="title desktop-only">What is a web compatibility issue?</div>
             <div class="text">A web compatibility issue occurs <strong>when a website behaves differently across browsers.</strong> Sometimes a website will load on one browser and crash or render in a strange way on another. </div>
           </div>
           <div class="image-half">
@@ -388,9 +396,10 @@ <h3 class="page-heading">Filing a web compatibility issue</h3>
         </div>
       </div>
       <div class="slide">
-        <div class="row full-height">
+        <div class="title mobile-only">What causes a web compatibility issue?</div>
+        <div class="row full-height mobile-col">
           <div class="text-half col">
-            <div class="title">What causes a web compatibility issue?</div>
+            <div class="title desktop-only">What causes a web compatibility issue?</div>
             <div class="text">Sometimes websites have bugs that prevent them from working in all browsers. Browsers also have different ways of implementing features that may affect a site’s usability. </div>
           </div>
           <div class="image-half">
@@ -399,12 +408,12 @@ <h3 class="page-heading">Filing a web compatibility issue</h3>
         </div>
       </div>
       <div class="slide">
-        <div class="row full-height">
+        <div class="row full-height mobile-col">
           <div class="text-half col">
-            <div class="title">What is a web compatibility issue?</div>
+            <div class="title desktop-only">What is a web compatibility issue?</div>
             <div class="text"><strong>We want to make sure the Internet works for everyone.</strong> Together with web developers and site owners, we help identify and fix web compatibility issues. Let us know if you find a website behaves differently across browsers. </div>
           </div>
-          <div class="image-half">
+          <div class="image-half image-only">
             <img class="" src="{{ url_for('static', filename='img/svg/help-step-3.svg') }}" title="What is a web compatibility issue" alt="What is a web compatibility issue" />
           </div>
         </div>
diff --git a/webcompat/templates/nav/issue-wizard-stepper.html b/webcompat/templates/nav/issue-wizard-stepper.html
index 95b774f82..2c483cae4 100644
--- a/webcompat/templates/nav/issue-wizard-stepper.html
+++ b/webcompat/templates/nav/issue-wizard-stepper.html
@@ -8,6 +8,7 @@
                 </div>
                 <div class="description">{{ step.label }}</div>
             </div>
+            <div class="description">{{ step.label }}</div>
         {% endfor %}
     </div>
-</div>
\ No newline at end of file
+</div>