From 8072d1983cd2044c44ad823dae14108f8b983a8e Mon Sep 17 00:00:00 2001 From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com> Date: Fri, 20 Sep 2024 16:06:30 +1200 Subject: [PATCH] Fix 404 page 'Oops!' text being cut off (#156) * Fix 404 page Oops text being cut off Fixes https://github.com/WordPress/wporg-parent-2021/issues/155 * Adjust font size and position to better match original design. --- .../wporg-parent-2021/sass/page/_404.scss | 19 ++++++++----------- 1 file changed, 8 insertions(+), 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 index 9e512ad9..d9436005 100644 --- 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 , 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; + } }