Fix 404 page 'Oops!' text being cut off (#156)

* Fix 404 page Oops text being cut off Fixes #155 * Adjust font size and position to better match original design.
WordPress · Sep 20, 2024 · 8072d19 · 8072d19
1 parent 8ea3bc8
commit 8072d19
Showing 1 changed file with 8 additions and 11 deletions.
diff --git a/source/wp-content/themes/wporg-parent-2021/sass/page/_404.scss b/source/wp-content/themes/wporg-parent-2021/sass/page/_404.scss
@@ -4,15 +4,7 @@ body.error404 {
 	background-color: var(--wp--preset--color--charcoal-2);
 
 	.site-content-container {
-
-		/*
-		 * Prevent "oops" from creating a horizontal scroll.
-		 * In some iOS versions, these rules also have to be applied to <html>, but that would bleed over to other
-		 * pages. It's better to just let there be a scroll, since it's not a commonly used page.
-		 */
-		position: relative; // needed for overflow to work
-		overflow: hidden;
-
+		position: relative;
 		z-index: 0;
 
 		@include break-small() {
@@ -39,14 +31,14 @@ body.error404 {
 				z-index: -1;
 				position: absolute;
 				top: 22px;
-				left: -4.9vw;
+				left: -10vw;
 				font-family: var(--wp--preset--font-family--eb-garamond);
 				font-size: var(--oops-font-size);
 				line-height: var(--oops-font-size);
 				opacity: 0.4; // Make the overlaid text more readable.
 
 				@include break-small() {
-					top: calc(var(--oops-font-size) * -0.25);
+					top: calc(var(--oops-font-size) * -0.58);
 				}
 			}
 		}
@@ -109,4 +101,9 @@ body.error404 {
 			}
 		}
 	}
+
+	.wp-block-wporg-global-footer {
+		background: unset;
+		z-index: 1;
+	}
 }