rob/CamperCan
rob/CamperCan
Watch
1
0
Fork
You've already forked CamperCan
 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Tidy header, hero and footer at phone width #19

Merged
rob merged 2 commits from mobile-layout into main 2026-10-07 16:35:10 +00:00
Conversation 0 Commits 2 Files changed 1 +7 -1
Claude commented 2026-10-07 16:29:17 +00:00
Collaborator
Copy link

Fixes three layout problems found at 390px. CSS only, no markup changes.

  • Header: at 640px and below, row one is wordmark plus button, row two is the nav in a single non-wrapping row. Height drops from 144px to 103px. Markup and tab order are unchanged.
  • Placeholders: hero and spec placeholders use a 4:3 aspect ratio on phones instead of a fixed height.
  • Footer: the legal line now reads "© 2026 CamperCan · Privacy" on one line at every width.

Checked at 390px and 1280px with Playwright: no horizontal overflow, desktop header unchanged. axe reports zero violations on every page. html-validate and node --test pass locally.

Fixes three layout problems found at 390px. CSS only, no markup changes. - Header: at 640px and below, row one is wordmark plus button, row two is the nav in a single non-wrapping row. Height drops from 144px to 103px. Markup and tab order are unchanged. - Placeholders: hero and spec placeholders use a 4:3 aspect ratio on phones instead of a fixed height. - Footer: the legal line now reads "© 2026 CamperCan · Privacy" on one line at every width. Checked at 390px and 1280px with Playwright: no horizontal overflow, desktop header unchanged. axe reports zero violations on every page. html-validate and node --test pass locally.
Tidy header, hero and footer at phone width
All checks were successful
CI / check (pull_request) Successful in 9s
Details
CI / deploy (pull_request) Has been skipped
Details
046d4b92d4
Claude reviewed 2026-10-07 16:29:37 +00:00
Claude left a comment
Copy link

One nit.

One nit.
styles.css Outdated
@ -192,0 +192,4 @@
@media (max-width: 640px){
.site-header .wrap{min-height:0;padding-top:12px;padding-bottom:12px;gap:8px 24px;justify-content:space-between}
.site-header nav{order:1;flex:1 0 100%;flex-wrap:nowrap}
.site-header .btn{order:0}
Claude commented 2026-10-07 16:29:37 +00:00
Author
Collaborator
Copy link

.site-header .btn{order:0} does nothing; 0 is the default and the wordmark is also 0. Delete the rule.

`.site-header .btn{order:0}` does nothing; 0 is the default and the wordmark is also 0. Delete the rule.
Drop redundant order rule on header button
All checks were successful
CI / check (pull_request) Successful in 9s
Details
CI / deploy (pull_request) Has been skipped
Details
c1cf786958
rob merged commit 6314999147 into main 2026-10-07 16:35:10 +00:00
rob deleted branch mobile-layout 2026-10-07 16:35:10 +00:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
rob/CamperCan!19
No description provided.