Entire

on the landing this is the layout I want , and it works perfectly, on desktop and landscaped tablets, but not on mobile views and vertical tablet layouts. This probably occurs due to placing image by top and right tags.

Fix it

Using the desktop layout as the source, apply it to the mobile devices too.

The ratio of size of icon and text , keep it identical icon behind text, so that start a walk button is clickable

Also on the map during a walk , it gets quite conjusted on mobile, so optimize the layout for that too

Also the vines in routes render on top of the content, making it unreadable and bad UX

@directory:.temp There are 4 screenshot files, from a mobile device : realme GT neo 3T. These show all the problems i am facing

4d ago·16m

I have fixed the issues across all the reported areas:

1. Landing Page Celestial Body & Headline Alignment

Root cause: The celestial figure was previously positioned with arbitrary viewport offsets (top-12 right-[21.22vw]), which drifted significantly on vertical phone viewports and portrait tablets, pushing the moon far above the text and misaligning the hit area.
Fix in app/page.tsx: Grouped the celestial figure and the hero text into a single cohesive bounding frame. The celestial figure is now centered behind the text (left-1/2 top-1/2 -translate-x-1/2 -translate-y-[52%]), with its size clamped smoothly across all screens. The ratio between the celestial figure and the text remains identical on mobile phones, vertical tablets, and widescreen desktop layouts.
Clickability: Ensured the celestial figure wrapper uses pointer-events-none while its internal central interactive touch zone sits at z-[5] strictly behind the primary CTA button (z-10 pointer-events-auto), leaving the "Begin a walk" button fully clickable with no pointer hijacking.

2. Map Layout on Mobile During a Walk

Root cause: On compact mobile screens, the map container was constrained, while oversized control buttons (w-12 h-12) and wide HUD bars caused overcrowding over map points and pins.
Fixes:
- In app/walk/page.tsx: Increased map vertical proportion on mobile from 42dvh to 46dvh (min-h-[260px]) and optimized top header buttons to w-9 h-9 sm:w-10 sm:h-10.
- In components/map/walk-map.tsx: Made the floating thumb control stack responsive (w-9 h-9 sm:w-11 sm:h-11, closer padding right-2.5 top-16 sm:right-4 sm:top-20), and moved the trail path legend indicator neatly so it never clashes with the HUD.
- In components/walk/walk-hud.tsx: Made the bottom HUD floating bar more compact on mobile with reduced padding, smaller font metrics, and tighter dividers (bottom-2 sm:bottom-4, min-w-[240px]), freeing up crucial map viewing space.

3. Vines Rendering on Top of Content

Root cause: components/nature/page-ambience.tsx was rendering fixed at z-20 on all viewports, placing large vine leaves and stems directly across text, cards, and interactive controls on narrower screens where gutters don't exist.
Fix in components/nature/page-ambience.tsx:
- Added max-md:hidden so vines only render when viewport gutters actually exist (framing the content on tablets and desktop as intended).
- Reduced the container z-index from z-20 to z-0 so vines always remain in the background behind page content (z-10).

To change the size of the celestial body on mobile devices, open app/page.tsx.

Around line 23, look for the wrapper div around <ThemeToggle />:

The size is controlled by the CSS variable --sun. You can adjust it in two ways:

Option 1: Adjust the `clamp(...)` values (Recommended)

[--sun:clamp(MIN, PREFERRED, MAX)]:

The first argument (300px) is the minimum size on small mobile screens.
The second argument (68vw) is the relative scaling across screen widths.

For example, to make it:

Smaller on mobile:
Larger on mobile:

Option 2: Use Tailwind Responsive Breakpoints (`sm:`, `md:`, `lg:`)

If you want explicit control for mobile vs. desktop:

(Here, mobile screens < 640px will use exactly 280px, and tablets/desktops will scale using clamp).