Fix for the 404 page that is off-centered and overflowing the viewport on mobile

Open CetinSert opened this issue 3 years ago • 0 comments

SyncHTML.io (try, learn more) – The next-gen, no-reload, real-time web playground with instant two-way input ⇄ output sync.

Issue

visit https://404.deno.dev
notice it is off-centered!!!
1. desktop: slight annoyance for the obsessive
2. mobile: ⚠️ page does not fit into screen!

Fix

remove class p-4 from body > div:first-child on the 404 page

<body>
-  <div class="flex flex-col items-center justify-center w-full h-screen p-4 bg-repeat bg-center font-sans" ⋯
+  <div class="flex flex-col items-center justify-center w-full h-screen bg-repeat bg-center font-sans" ⋯

Screenshots on mobile

before	after

SyncHTML.io (try, learn more) – The next-gen, no-reload, real-time web playground with instant two-way input ⇄ output sync.

Sep 08 '22 06:09 CetinSert