fixed 404 styling

hlxsites · Dec 5, 2024 · 1210684 · 1210684
1 parent c6cf428
commit 1210684
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/404.html b/404.html
@@ -11,7 +11,7 @@
             "@dropins/storefront-auth/": "/scripts/__dropins__/storefront-auth/"
         }
     }
-</script>
+  </script>
   <script type="text/javascript">
     window.isErrorPage = true;
     window.errorCode = '404';
@@ -42,9 +42,13 @@
   <link rel="stylesheet" href="/styles/styles.css">
   <style>
     main.error {
-      min-height: calc(100vh - var(--nav-height));
-      display: flex;
       align-items: center;
+      display: flex;
+      margin: 0 auto;
+      max-width: 1264px;
+      min-height: calc(100vh - var(--nav-height));
+      padding: 0 32px;
+      width: 100%;
     }
 
     main.error .error-number {

diff --git a/scripts/commerce.js b/scripts/commerce.js
@@ -212,6 +212,10 @@ export async function loadErrorPage(code = 404) {
   const parser = new DOMParser();
   const doc = parser.parseFromString(htmlText, 'text/html');
   document.body.innerHTML = doc.body.innerHTML;
+  // get dropin styles
+  document.head.querySelectorAll('style[data-dropin]').forEach((style) => {
+    doc.head.appendChild(style);
+  });
   document.head.innerHTML = doc.head.innerHTML;
 
   // https://developers.google.com/search/docs/crawling-indexing/javascript/fix-search-javascript