Skip to content

Improve 404 page mobile responsiveness and design#477

Closed
Adrija-verse wants to merge 1 commit intonumfocus:mainfrom
Adrija-verse:Adrija-verse-patch-1
Closed

Improve 404 page mobile responsiveness and design#477
Adrija-verse wants to merge 1 commit intonumfocus:mainfrom
Adrija-verse:Adrija-verse-patch-1

Conversation

@Adrija-verse
Copy link

Overview

Improves the 404 error page with better mobile responsiveness and enhanced design as requested in #469.

Closes #469

Changes Made

Mobile Responsiveness

  • Added responsive breakpoints:
    • 768px (tablets): Reduced padding and font sizes
    • 480px (mobile phones): Stacked buttons vertically, full-width layout
    • 320px (small phones): Further optimized spacing and text sizes
  • Buttons now stack vertically on mobile for easier thumb-tapping
  • Full-width buttons on small screens improve usability
  • Optimized padding and margins for small viewports

Design Improvements

  • Enhanced color scheme with darker gradient background for better contrast
  • Improved button styling with gradient effects
  • Better visual hierarchy with refined spacing
  • Smoother hover and active states on interactive elements
  • More professional glassmorphism effect

Accessibility

  • Added aria-label to language selector
  • Added rel="noopener noreferrer" to external links for security
  • Implemented prefers-reduced-motion media query for users who prefer reduced animations
  • Better semantic HTML structure

Bug Fixes

  • Fixed emoji encoding issues (proper UTF-8 display)
  • Improved contrast for better readability

Testing

Tested on:

  • Desktop (1920x1080)
  • Tablet (768px width)
  • Mobile (480px width)
  • Small phone (320px width)
  • Browser dev tools responsive mode

Screenshots

Desktop View

Screenshot 2026-02-04 124547 Screenshot 2026-02-04 124535

Mobile View

WhatsApp Image 2026-02-04 at 1 07 59 PM (1)
WhatsApp Image 2026-02-04 at 1 07 59 PM


This is my second contribution to DISCOVER-Cookbook as part of GSoC 2026 preparation with NumFOCUS!

Improve 404 page mobile responsiveness and design

- Add responsive breakpoints for mobile (480px), tablet (768px), small phones (320px)
- Scale font sizes appropriately on smaller screens
- Stack buttons vertically on mobile for better UX
- Improve color contrast and visual hierarchy
- Add accessibility features (aria-labels, reduced motion support)
- Fix emoji encoding issues
- Enhance button styling with gradients and hover effects
- Add better touch targets for mobile users

Fixes numfocus#469
@netlify
Copy link

netlify bot commented Feb 4, 2026

Deploy Preview for stupendous-kringle-a86e81 failed.

Name Link
🔨 Latest commit ce380d9
🔍 Latest deploy log https://app.netlify.com/projects/stupendous-kringle-a86e81/deploys/6982f791e09545000849dfc8

@Adrija-verse
Copy link
Author

@AR21SM please review this PR. THANK YOU

@AR21SM
Copy link
Member

AR21SM commented Mar 1, 2026

Thank you for the contribution! Closing this in favor of #472

@AR21SM AR21SM closed this Mar 1, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Enhancement]: Improve 404 Page Design and Mobile Responsiveness

2 participants