Make it work on phones

About 45 minutesYou need: your project running at localhost:3000 in Chrome, Cursor open beside it
This video is in the full courseGet the course to watch every video and read every lesson in full. GHS 399, paid once.Get the course · GHS 399
Video · 10:44
Goal

Test your site at phone sizes with Chrome's device mode, fix the common mobile problems with targeted prompts, and add a mobile menu that works comfortably with one thumb.

Why this matters

Think about how a business owner will meet your website. Someone sends them your link on WhatsApp. They tap it on their phone, between customers, with one thumb. If the text is tiny, the menu doesn't open or the page slides sideways, they close it, and you never hear about it.

For many local businesses, most visitors arrive on a phone. Many of them are on cheaper phones with smaller screens and slower connections. A site that only looks good on your laptop is only half finished.

The good news: your site is built with Tailwind, which is designed mobile first. Most of it probably works on a phone already. This lesson finds the parts that don't and fixes them, one at a time.

In the full lesson

  1. The idea in plain English
  2. Do it
  3. The prompt
  4. Check it worked
  5. Understand what AI wrote
  6. Quick check
  7. What you can do now
Stage 1 · Build itYou’ve seen the why. The how is in the course.

The step-by-step, the prompt to copy, the video and the check-it-worked list, for every lesson in all 15 modules. GHS 399 ($40), paid once by mobile money or card, yours to keep.

Get the course · GHS 399See what’s inside
Already have the course? Open the full lesson