From 5cf3ac33e60e9c5e5589a289df6034fc1935b7ac Mon Sep 17 00:00:00 2001 From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com> Date: Tue, 24 Sep 2024 11:28:43 +1200 Subject: [PATCH] Switch to hiding overflow on the Oops! text itself overflow-x: hidden still hides vertical overflow See https://github.com/WordPress/wporg-parent-2021/issues/155 --- .../wporg-parent-2021/sass/page/_404.scss | 25 ++++++++----------- 1 file changed, 11 insertions(+), 14 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 43abab87..535142d1 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-x: hidden; - + position: relative; z-index: 0; @include break-small() { @@ -28,7 +20,12 @@ body.error404 { } .wporg-parent-oops-container { - position: relative; + position: absolute; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + overflow: hidden; > p { display: none; @@ -36,19 +33,19 @@ body.error404 { &::after { content: "Oops!"; - color: inherit; display: block; z-index: -1; - position: absolute; + position: relative; + width: 120vw; top: 22px; - left: -10vw; + left: -4.9vw; 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.55); + top: calc(var(--oops-font-size) * -0.25); } } }