--- a/browser/base/content/aboutNetError.xhtml
+++ b/browser/base/content/aboutNetError.xhtml
@@ -110,21 +110,16 @@
       }
 
       function showCertificateErrorReporting() {
         // Display error reporting UI
         document.getElementById('certificateErrorReporting').style.display = 'block';
       }
 
       function showAdvancedButton(allowOverride) {
-        // Display weak crypto advanced UI
-        document.getElementById("buttonContainer").style.display = "flex";
-        document.getElementById("advancedButton").style.display = "block";
-        document.getElementById("errorTryAgain").style.display = "none";
-
         // Get the hostname and add it to the panel
         var panelId = gIsCertError ? "badCertAdvancedPanel" : "weakCryptoAdvancedPanel";
         var panel = document.getElementById(panelId);
         for (var span of panel.querySelectorAll("span.hostname")) {
           span.textContent = document.location.hostname;
         }
         if (!gIsCertError) {
           panel.replaceChild(document.getElementById("errorLongDesc"),
@@ -248,26 +243,24 @@
 
         var ld = document.getElementById("errorLongDesc");
         if (ld)
         {
           ld.innerHTML = errDesc;
         }
 
         if (err == "sslv3Used") {
-          document.querySelector(".title").setAttribute("sslv3", "true");
-          document.getElementById("errorTryAgain").style.display = "none";
           document.getElementById("learnMoreContainer").style.display = "block";
           var learnMoreLink = document.getElementById("learnMoreLink");
           learnMoreLink.href = "https://support.mozilla.org/kb/how-resolve-sslv3-error-messages-firefox";
-          document.getElementById("buttonContainer").style.display = "flex";
+          document.body.className = "certerror";
         }
 
         if (err == "weakCryptoUsed") {
-          document.querySelector(".title").setAttribute("weakCrypto", "true");
+          document.body.className = "certerror";
         }
 
         // remove undisplayed errors to avoid bug 39098
         var errContainer = document.getElementById("errorContainer");
         errContainer.parentNode.removeChild(errContainer);
 
         var className = getCSSClass();
         if (className && className != "expertBadCert") {
@@ -284,23 +277,23 @@
           faviconParent.removeChild(favicon);
           favicon.setAttribute("href", "chrome://global/skin/icons/" + className + "_favicon.png");
           faviconParent.appendChild(favicon);
         }
 
         if (err == "remoteXUL") {
           // Remove the "Try again" button for remote XUL errors given that
           // it is useless.
-          document.getElementById("errorTryAgain").style.display = "none";
+          document.getElementById("netErrorButtonContainer").style.display = "none";
         }
 
         if (err == "cspBlocked") {
           // Remove the "Try again" button for CSP violations, since it's
           // almost certainly useless. (Bug 553180)
-          document.getElementById("errorTryAgain").style.display = "none";
+          document.getElementById("netErrorButtonContainer").style.display = "none";
         }
 
         window.addEventListener("AboutNetErrorOptions", function(evt) {
         // Pinning errors are of type nssFailure2
           if (getErrorCode() == "nssFailure2" || getErrorCode() == "weakCryptoUsed") {
             document.getElementById("learnMoreContainer").style.display = "block";
             var learnMoreLink = document.getElementById("learnMoreLink");
             // nssFailure2 also gets us other non-overrideable errors. Choose
@@ -550,37 +543,39 @@
 
         <!-- Long Description (Note: See netError.dtd for used XHTML tags) -->
         <div id="errorLongDesc" />
 
         <div id="learnMoreContainer">
           <p><a href="https://support.mozilla.org/kb/what-does-your-connection-is-not-secure-mean" id="learnMoreLink" target="new">&errorReporting.learnMore;</a></p>
         </div>
 
-        <div id="buttonContainer" class="button-container">
+        <div id="certErrorButtonContainer" class="button-container">
           <button id="returnButton" class="primary" autocomplete="off" autofocus="true">&returnToPreviousPage.label;</button>
           <div id="buttonSpacer"></div>
           <button id="advancedButton" autocomplete="off" autofocus="true">&advanced.label;</button>
         </div>
       </div>
 
-      <button id="errorTryAgain" class="primary" autocomplete="off" onclick="retryThis(this);">&retry.label;</button>
+      <div id="netErrorButtonContainer" class="button-container">
+        <button id="errorTryAgain" class="primary" autocomplete="off" onclick="retryThis(this);">&retry.label;</button>
+      </div>
+
       <script>
         // Only do autofocus if we're the toplevel frame; otherwise we
         // don't want to call attention to ourselves!  The key part is
         // that autofocus happens on insertion into the tree, so we
         // can remove the button, add @autofocus, and reinsert the
         // button.
         if (window.top == window) {
             var button = document.getElementById("errorTryAgain");
-            var nextSibling = button.nextSibling;
             var parent = button.parentNode;
-            parent.removeChild(button);
+            button.remove();
             button.setAttribute("autofocus", "true");
-            parent.insertBefore(button, nextSibling);
+            parent.appendChild(button);
         }
       </script>
 
       <!-- UI for option to report certificate errors to Mozilla. Removed on
            init for other error types .-->
       <div id="certificateErrorReporting">
         <p>
           <input type="checkbox" id="automaticallyReportInFuture" />

--- a/browser/themes/shared/aboutNetError.css
+++ b/browser/themes/shared/aboutNetError.css
@@ -1,17 +1,32 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @import url("chrome://global/skin/in-content/info-pages.css");
 
-body.certerror .title,
-.title[sslv3=true],
-.title[weakCrypto=true] {
+body {
+  background-image: linear-gradient(-45deg, #eeeeee,     #eeeeee 33%,
+                                            #fbfbfb 33%, #fbfbfb 66%,
+                                            #eeeeee 66%, #eeeeee);
+  background-size: 64px 32px;
+  background-repeat: repeat-x;
+  /* Top padding for when the window height is small.
+     Bottom padding to keep everything centered. */
+  padding: 75px 0;
+}
+
+body.certerror {
+  background-image: linear-gradient(-45deg, #f0d000,     #f0d000 33%,
+                                            #fedc00 33%, #fedc00 66%,
+                                            #f0d000 66%, #f0d000);
+}
+
+body.certerror .title {
   background-image: url("cert-error.svg");
 }
 
 #errorContainer {
   display: none;
 }
 
 /* Pressing the retry button will cause the cursor to flicker from a pointer to
@@ -20,19 +35,31 @@ body.certerror .title,
 button:disabled {
   cursor: pointer;
 }
 
 #learnMoreContainer {
   display: none;
 }
 
-#buttonContainer {
+.button-container {
+  display: flex;
+  flex-flow: row wrap;
+}
+
+#certErrorButtonContainer {
   display: none;
-  flex-flow: row wrap;
+}
+
+body.certerror #certErrorButtonContainer {
+  display: flex;
+}
+
+body.certerror #netErrorButtonContainer {
+  display: none;
 }
 
 #errorTryAgain {
   margin-top: 1.2em;
   min-width: 150px;
 }
 
 #returnButton {
@@ -42,16 +69,20 @@ button:disabled {
 #buttonSpacer {
   flex: 1;
 }
 
 #advancedButton {
   display: none;
 }
 
+body.certerror #advancedButton {
+  display: block;
+}
+
 #certificateErrorReporting {
   display: none;
 }
 
 .advanced-panel {
   /* Hidden until the link is clicked */
   display: none;
   background-color: white;
@@ -77,23 +108,23 @@ button:disabled {
 span#hostname {
   font-weight: bold;
 }
 
 #automaticallyReportInFuture {
   cursor: pointer;
 }
 
-body:not(.certerror) #errorCode {
+#errorCode:not([href]) {
   color: var(--in-content-page-color);
   cursor: text;
   text-decoration: none;
 }
 
-body.certerror #errorCode {
+#errorCode[href] {
   white-space: nowrap;
 }
 
 #badCertTechnicalInfo {
   overflow: auto;
   white-space: pre-wrap;
 }
 
@@ -112,8 +143,54 @@ body.certerror #errorCode {
   padding: 1em 17.5%;
 }
 
 #certificateErrorText {
   font-family: monospace;
   white-space: pre-wrap;
   padding: 1em 0;
 }
+
+@media only screen and (max-width: 959px) {
+  body {
+    padding: 75px 48px;
+  }
+
+  .title {
+    background-image: none !important;
+    -moz-padding-start: 0;
+    -moz-margin-start: 0;
+  }
+
+  .title-text {
+    padding-top: 0;
+  }
+}
+
+@media only screen and (max-width: 640px) {
+  body {
+    padding: 75px 20px 0;
+    justify-content: unset;
+  }
+
+  .button-container button {
+    /* Force buttons to display: block here to try and enforce collapsing margins */
+    display: block;
+    width: 100%;
+    margin: 0.66em 0 0;
+  }
+
+  .title-text {
+    padding-bottom: 0;
+    border-bottom: none;
+  }
+}
+
+/* For small window height, shift the stripes up by 10px.
+ * We could just change the background size, but that changes
+ * the angle of the stripes so just shifting up is easier. */
+@media (max-height: 480px) {
+  body {
+    background-position: 10px -10px;
+    padding-top: 38px;
+    padding-bottom: 38px;
+  }
+}