search

WordPress / wporg-parent-2021

21 stars 11 forks source link

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

Closed adamwoodnz closed 2 months ago

adamwoodnz commented 2 months ago

Fixes https://github.com/WordPress/wporg-parent-2021/issues/155

I'm not sure what has changed to make this happen, nor do I know what the original design was, so this is an attempt to stop the text being cropped both vertically and horizontally.

Before 1536x768
wordpress org_duh(3 1536x864) (1)

Changes

Adjusts the size of the text so that it fits horizontally, allows overflow to be visible, and adjusts layering so that the footer can overlap the text.

The overflow: hidden looks like it was added to stop the page scrolling due to the height of the 'Oops!' text, but I'm not observing that as being a problem.

Screenshots of most common screen sizes

1920x1080 1366x768 1536x864
wordpress org_duh(1 1920x1080) wordpress org_duh(2 1366x768) wordpress org_duh(3 1536x864)
Tablet portrait Tablet landscape Mobile
wordpress org_duh(iPad) wordpress org_duh(iPad) (1) wordpress org_duh(Samsung Galaxy S20 Ultra)
renintw commented 2 months ago

nor do I know what the original design was

It seems like there's no design for the page (https://github.com/WordPress/wporg-parent-2021/pull/54#issuecomment-1319429856). And based on the comments in that PR, the 404 page for the news is also broken, in a different way, more badly.

I can see this fix works on other .org sites except for the news while sandboxed.

How it was look like from the PR

Desktop Tablet Mobile
Screen Shot 2022-11-23 at 5 42 10 PM Screen Shot 2022-11-23 at 5 42 23 PM Screen Shot 2022-11-23 at 5 42 31 PM
renintw commented 2 months ago

Can't tell what change caused this issue either, but changing top: calc(var(--oops-font-size) * -0.25); to top: calc(var(--oops-font-size) * -0.55); and 47vw to 44vw has mostly restored it to its original look.

fcoveram commented 2 months ago

Here is the design of that page. It was made for News.

Mockup of Not found page

The text is placed at the top and cut off by the header.

It would be great to reach the original design. If that is not possible, the changes proposed work well.

adamwoodnz commented 2 months ago

Thanks for the settings @renintw, looking good:

Screenshots

Desktop (1920x1080 - most common) Tablet Mobile
localhost_8888_404(1 1920x1080) (1) localhost_8888_404(iPad) (1) localhost_8888_404(iPhone 12 Pro)
adamwoodnz commented 2 months ago

I shipped a fix for the positioning of the text on the News 404 page too, although noted it works a bit differently; the footer has a top border and the descender on the 'p' goes behind it:

Screenshot 2024-09-20 at 4 46 19 PM

Should we make it consistent with the other sites?

renintw commented 2 months ago

Should we make it consistent with the other sites?

Is it straightforward to do so, if yes, I'd vote for changing it.

adamwoodnz commented 2 months ago

✅ News is now consistent with the other sites