24 lines
845 B
Markdown
24 lines
845 B
Markdown
# Prompt 05: Make It Mobile-Friendly
|
|
|
|
Copy and paste this into Claude Code:
|
|
|
|
```
|
|
Make the todo app responsive and mobile-friendly. Requirements:
|
|
|
|
- Works well on phone screens (375px wide and up)
|
|
- Touch-friendly: buttons and inputs are at least 44px tall
|
|
- Category filters wrap to multiple lines on small screens
|
|
- Search bar is full width on mobile
|
|
- Task text does not overflow, long text wraps properly
|
|
- Add a proper viewport meta tag if missing
|
|
- Swipe-to-delete would be a bonus but not required
|
|
- Test: the app should look good on both a phone screen and a desktop monitor
|
|
- Keep all existing functionality working
|
|
```
|
|
|
|
## What to Expect
|
|
|
|
- Open `index.html` on your phone (or use browser dev tools to simulate a phone screen)
|
|
- Everything fits and is easy to tap
|
|
- No horizontal scrolling
|
|
- Filter buttons wrap neatly on small screens
|