fix: make landing page fully responsive for mobile (#3) - #73
Open
hermesxclaw-ctrl wants to merge 1 commit into
Open
fix: make landing page fully responsive for mobile (#3)#73hermesxclaw-ctrl wants to merge 1 commit into
hermesxclaw-ctrl wants to merge 1 commit into
Conversation
- Navigation: compact logo and buttons with proper touch-target sizing on mobile - Hero: column-stacked CTAs on mobile, responsive clamp() typography down to 320px - Tools grid: reduced padding and icon sizes for small screens - How it works: adjusted step spacing and text for mobile viewports - CTA section: full-width stacked buttons on mobile - Footer: center-aligned stacked layout on mobile - Prism: responsive sizing via CSS media queries - Added CSS media queries for sub-480px and sub-640px breakpoints - All sections use px-4 sm:px-6 for mobile-first padding Closes iii123iii#3
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Comprehensive mobile-responsive pass on the landing page to fix all overflow, spacing, and layout issues on mobile devices from 320px viewport width and up.
Changes
Navigation
px-3/h-14on mobile,px-4/h-16on sm+)whitespace-nowrapto prevent text breakingHero Section
clamp()typography that scales from 1.8rem (320px) up to 4.8rem (desktop)flex-col) on mobile, horizontal (sm:flex-row) on wider screensw-full sm:w-auto)pt-16 pb-20vsmd:pt-32 md:pb-36)Tools Grid
w-9 h-9→sm:w-10 sm:h-10)sm:How It Works
CTA Section
flex-col)Footer
flex-col), horizontal onsm:CSS
px-4 sm:px-6mobile-first paddingValidation
Wallet
Closes #3