Explore-Beyond-Innovations / Explore-Beyond-Innovations/ZeroXBridge_Frontend

Make Contact Us Page Responsive (Mobile → 4K)

Open
#231 14 comments 0 reactions 1 assignee Claimed by @Sendi0011 View on GitHub
24 hours ETA enhancement good first issue
Dominant language
TypeScript
Stars
32
Forks
70
PR merge metrics
No merged PRs in 30d

Description

# 📱 Issue: Make Contact Us Page Responsive (Mobile → 4K)

## ❗️Important
🔴 This work must be implemented against the `app-main` branch.
Please **fork from `app-main`** before starting and submit your PR **back to `app-main`** — not `main`.

[FIGMA LINK](https://www.figma.com/design/tCSwXSGaJS0Sm3L3JnFzYu/ZeroXBridge?node-id=4005-788&t=u5ViJouuqn1mdJND-4)
---

## 📍 Scope & Location
- Update only files inside: `/dapp/support`
- `dapp/support/ContactForm.tsx`
- `dapp/support/contact/page.tsx`

> **Note:** Do **not** add or rebuild Navbar, OnlyDust banner, or Footer here. This issue focuses solely on **responsiveness** of what’s already built.

---

## 📋 Task
Make the Contact Us page fully responsive across common breakpoints:
- Target widths to validate: **320, 375, 414, 640, 768, 1024, 1280, 1440, 1920, 2560, 3840**.
- Layout behavior:
- **Mobile:** Single-column, generous spacing, readable line-length, stacked fields.
- **Tablet:** Comfortable container width; grid spacing scales properly.
- **Desktop:** Matches PC baseline from Issue #1.
- **4K/Ultra-wide:** Constrain content with a centered max-width; avoid overly stretched fields.
- Respect Windows laptop sizes (common widths 1366, 1536, 1600) where inaccuracies were reported.

Accessibility & UX:
- Inputs remain tappable/usable on small screens.

---

## ✅ Deliverables
- Responsive styles applied to the existing Contact form/page.
- **Screenshots** at three sizes: **mobile**, **laptop/desktop**, **4K**.
- **1 short video (≤30s)** showing a live resize from mobile → desktop → 4K.

---

## ✅ Acceptance Criteria
- [ ] No horizontal overflow at any tested width.
- [ ] Typography, spacing, and controls scale appropriately across breakpoints.
- [ ] Accessibility preserved (focus, labels, readable contrast).

---

## General Notes
- Keep implementation **simple and consistent** with the existing design system.
- All work remains within `/dapp/support`.
- Include the **screenshots + video** in the PR.

rity`

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.