<div style="display: flex; flex-wrap: wrap; white-space: pre-wrap; align-items: center; "><img height="20" width="20" style="border-radius:50%; margin-right: 4px;" decoding="async" src="https://avatars.githubusercontent.com/u/36066?s=20&v=4" /><strong>pablobm</strong> left a comment <a href="https://github.com/openstreetmap/openstreetmap-website/pull/6555#issuecomment-3562857192">(openstreetmap/openstreetmap-website#6555)</a></div>
<p dir="auto">I gather that this is about the discussion at <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1204760036" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/3532" data-hovercard-type="issue" data-hovercard-url="/openstreetmap/openstreetmap-website/issues/3532/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/issues/3532">#3532</a>. <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/anant2526/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/anant2526">@anant2526</a>, please make sure to reference previous discussions so that we can tell the context better. I see that you put the issue number in the PR title, but that's easy to miss.</p>
<p dir="auto">You are providing an HTML document, but this doesn't automatically work. It needs to be integrated in the application correctly. I did a quick fix at <a class="commit-link" href="https://github.com/openstreetmap/openstreetmap-website/compare/master...pablobm:openstreetmap-website:404-page"><tt>master...pablobm:openstreetmap-website:404-page</tt></a>, but it's still not good enough. It needs to follow the template and layout conventions, like the current error page does. See <a href="https://github.com/openstreetmap/openstreetmap-website/blob/a2d0762f2a4499e7ddcbc6dde29bac847c249024/app/views/errors/not_found.html.erb">app/views/errors/not_found.html.erb</a>. If you are new to Ruby on Rails, I recommend you read the documentation (eg: <a href="https://guides.rubyonrails.org/layouts_and_rendering.html" rel="nofollow">https://guides.rubyonrails.org/layouts_and_rendering.html</a>).</p>
<p dir="auto">As for the design itself, it looks nice but it has issues. For example the text is not visible in small screens:</p>
<markdown-accessiblity-table><table role="table">
<thead>
<tr>
<th>Current</th>
<th>This PR</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://github.com/user-attachments/assets/5ec7e3be-7c00-4224-baac-b9fbf9f48ee4">404-mobile-current.png (view on web)</a></td>
<td><a href="https://github.com/user-attachments/assets/a85ad638-1a6b-4602-bea9-5513ce43033a">404-mobile-pr.png (view on web)</a></td>
</tr>
</tbody>
</table></markdown-accessiblity-table>
<p dir="auto">I recommend that you look into how we use Bootstrap in this application, as it has features to help with responsive design.</p>

<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/pull/6555#issuecomment-3562857192">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLML2O4ER3JRSW65XMT354BVZAVCNFSM6AAAAACMY6NFX2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTKNRSHA2TOMJZGI">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLLLZ5DTJKFXIQIKD2D354BVZA5CNFSM6AAAAACMY6NFX2WGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTWULTROQ.gif" height="1" width="1" alt="" /><span style="color: transparent; font-size: 0; display: none; visibility: hidden; overflow: hidden; opacity: 0; width: 0; height: 0; max-width: 0; max-height: 0; mso-hide: all">Message ID: <span><openstreetmap/openstreetmap-website/pull/6555/c3562857192</span><span>@</span><span>github</span><span>.</span><span>com></span></span></p>

<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/pull/6555#issuecomment-3562857192",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/6555#issuecomment-3562857192",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>