Mobile Responsive

Your feedback form looks great on your laptop, but what about on a phone? Or a tablet? Many B2B SaaS users access apps on mobile devices, and if your app breaks on small screens, you lose them. In this lesson, you'll test your app across different screen sizes and fix any responsive design issues.

1. Why mobile responsiveness matters for B2B SaaS

The mobile reality:

While B2B SaaS traditionally meant "desktop at the office," that's changing fast. According to recent industry data, over 60% of employees now access business applications on mobile devices at least occasionally – whether checking updates during commutes, responding to notifications, or working remotely.

Common mobile issues that drive users away:

• Broken layouts: Navigation overlaps content, buttons disappear off screen
• Unreadable text: Font sizes too small without zooming
• Hidden buttons: Critical actions require horizontal scrolling to find
• Poor touch targets: Buttons too small to tap accurately (leads to mis-clicks)
• Unusable forms: Input fields don't fit on screen, keyboard covers submit button
• Slow interactions: Heavy animations or images bog down mobile connections

Your goal:

Ensure your app provides a beautiful, functional experience on all screen sizes. Users shouldn't have to pinch, zoom, or rotate their screen to use your product.

Real example:

Imagine a manager trying to approve a feedback submission on their phone. If the approval button is cut off or requires horizontal scrolling, they'll get frustrated and wait until they're back at their desk – or worse, ignore it entirely. Mobile friction = lost engagement.

Outcome: You understand why mobile responsiveness is critical for B2B SaaS.

2. Understanding Tailwind breakpoints

Before testing your app, you need to understand how responsive design works in Next.js with Tailwind CSS. Tailwind uses a breakpoint system that maps perfectly to real-world devices.

Tailwind's breakpoint system:

Tailwind uses a mobile-first approach with these breakpoints:

• Base (no prefix) – 0px+ → Mobile phones (iPhone)
• sm: – 640px+ → Large phones (iPhone Plus/Pro Max)
• md: – 768px+ → Tablets (iPad portrait)
• lg: – 1024px+ → Tablets + laptops (iPad landscape, MacBook)
• xl: – 1280px+ → Laptops + desktops (MacBook)
• 2xl: – 1536px+ → Large desktops (iMac, external displays)

Note: For most B2B SaaS apps, you'll primarily use Base, md:, and xl:. The 2xl breakpoint is rarely needed unless your users have very large external displays.

Mobile-first approach:

This means you write styles for mobile devices first, then add breakpoint prefixes to adjust for larger screens:

• Base styles apply to everyone (mobile and up)
• Breakpoint prefixes apply at that size and up (e.g., md: applies at 768px and larger)

What this means for prompting AI:

When you ask Claude to fix responsive issues, you'll describe what you want at different breakpoints:

• "Make the button full-width on mobile, but auto-width on tablets and up" → AI knows to use w-full md:w-auto
• "Stack the cards vertically on phones, but show them in a grid on tablets" → AI knows to use flex flex-col md:grid md:grid-cols-2
• "Use smaller padding on mobile, larger on desktop" → AI knows to use p-4 lg:p-8

You don't need to know the exact Tailwind classes – just describe the behavior you want at each screen size, and the AI will implement it correctly.

Key point:

When testing and fixing issues, think about these device categories:

• Mobile phones (iPhone): Base styles
• Tablets (iPad): md: breakpoint and up
• Laptops (MacBook): xl: breakpoint and up

We use Apple devices as the examples here, but your customers are also on Android phones and Windows laptops – the same breakpoints cover them, so keep those non-Apple screen sizes in mind as you test.

Outcome: You understand Tailwind's breakpoint system and how it maps to real Apple devices.

3. Install and configure Responsive Viewer

Responsive Viewer is a Chrome extension that lets you test multiple screen sizes simultaneously without manually resizing your browser.

Install the extension:

1. Open Chrome and go to the Chrome Web Store
2. Click "Add to Chrome"
3. Click "Add extension" when prompted
4. Pin the extension to your toolbar for easy access

Configure your test devices:

Once installed, click the Responsive Viewer icon and set up these devices to cover all major breakpoints:

• iPhone: 390px width – tests mobile phones (base styles)
• iPad: 820px width – tests tablets (md: breakpoint)
• MacBook: 1440px width – tests laptops/desktops (xl: breakpoint)

These three devices cover the critical breakpoints you'll use most often. You can also add custom sizes if you know specific devices your users have.

Test your app:

1. Open your app in Chrome – ask Claude to start the dev server, then open the local URL it gives you (the Responsive Viewer extension runs in Chrome)
2. Click the Responsive Viewer icon
3. Enable the breakpoints you configured
4. Navigate through your app – home page, feedback form, any other pages

Watch how each screen size displays your content. This is what your users see.

Outcome: Responsive Viewer is installed and showing your app across multiple screen sizes.

4. Audit your app across breakpoints

Now systematically test every major page and flow. Document issues so you can fix them methodically.

What to check:

Test these elements on each screen size:

• Navigation: Does the menu fit? Can users access all links?
• Forms: Are input fields full-width on mobile? Can users see the submit button?
• Cards/Lists: Do cards stack vertically on mobile or overflow horizontally?
• Modals: Does your feedback modal fit on small screens?
• Images: Do images scale properly or break the layout?
• Typography: Is text readable without zooming?
• Buttons: Are buttons large enough to tap (minimum 44x44px)?

Get your testing URLs:

Test and document issues:

As you go through each page on each device:

1. Document the issue: "Submit button cut off on iPhone"
2. Note the URL: Where does this problem occur?
3. Take screenshots if helpful (optional, but useful for before/after)

Keep a simple list of issues as you find them. You'll use this list to prompt Claude in the next step.

Outcome: You have a complete audit documenting all responsive issues.

5. Fix responsive issues with Claude

Now that you've documented all the issues, you'll work with Claude to fix them. The key is describing what you want at each device size – the AI will handle the technical implementation.

How to prompt effectively:

When asking Claude to fix responsive issues, describe the behavior you want at different screen sizes. Use the device categories you learned in Section 2:

• Mobile phones (iPhone)
• Tablets (iPad)
• Laptops/Desktops (MacBook)

Example prompts that work well:

Instead of asking for technical details, describe the problem and desired behavior:

• ❌ Don't say: "Add md:flex-row to this div"

• ✅ Do say: "The cards are stacking vertically on my MacBook. Make them display side-by-side on laptops but keep them stacked on mobile phones."

• ❌ Don't say: "Use w-full md:w-auto on the button"

• ✅ Do say: "The submit button is too narrow on my iPhone. Make it full-width on mobile phones, but auto-width on tablets and up."

• ❌ Don't say: "Apply responsive padding utilities"

• ✅ Do say: "There's too much padding around the form on my iPhone. Reduce the padding on mobile phones, but keep it larger on laptops."

Use this AI prompt template:

Test your fixes:

After Claude makes changes:

1. Refresh Responsive Viewer – do the fixes work?
2. Test all devices – check each screen size you configured
3. Try interactions – tap buttons, fill forms, open modals
4. Update your checklist – mark issues as resolved or note if they need more work

If an issue isn't fully fixed, describe what's still wrong using the same clear language:

"The button is better, but it's still cut off on iPhone. Can you make sure it has enough padding around it on that device?"

Iterate until complete:

Don't expect perfection on the first try. Work through your checklist methodically:

• Fix a few issues at a time
• Test after each batch of fixes
• Provide clear feedback to the AI about what's working and what isn't

This iterative process is how professional developers work – test, fix, test again.

Outcome: All responsive issues are fixed and your app works beautifully on all device sizes.

What's next

You've made your app mobile-friendly:

• ✅ Understand why mobile responsiveness matters for B2B SaaS
• ✅ Learned Tailwind breakpoints and how they map to real devices
• ✅ Installed Responsive Viewer and tested your app across multiple screen sizes
• ✅ Audited all responsive issues systematically
• ✅ Fixed issues by prompting Claude effectively

Continue to: 5.4 Webhook Integration

In the next lesson, you'll:

• Understand how APIs and webhooks work for non-technical builders
• Plan the feedback integration with Claude in plan mode
• Connect your feedback form to the n8n webhook (outgoing)
• Create a webhook endpoint to receive processed data from n8n (incoming)
• Test the complete bidirectional flow using Vercel preview deployments

Your feedback form and n8n workflow will finally talk to each other!