Make Any AI-Built Website Mobile-Friendly With AI

Check the Website Yourself

Before changing the design, identify the actual responsive problems across the website. Do not redesign the site just because the mobile version has a few issues.

Open the website in your browser and test several screen sizes. Pay particular attention to:

Navigation Hero section Headings Buttons Cards and grids Forms Images Tables Modals Footers Sticky elements Horizontal scrolling

Also check important pages beyond the homepage.

Run the Responsive Audit

Give this to your AI coding assistant before changing anything.

Responsive & Mobile Usability Audit

Inspects every important page and reusable component across mobile, tablet, laptop, and desktop widths for overflow, cramped or overlapping elements, broken navigation, non-collapsing grids, image and form problems, and misbehaving modals or sticky elements — changes nothing, and returns critical/medium/minor issues, the responsible files, and a short fix plan.

Review this entire website specifically for responsive and mobile usability problems. Do not change anything yet. Inspect the existing layout and identify issues across: - mobile phones - tablets - laptops - larger desktop screens Check every important page and reusable component for: - horizontal scrolling - elements overflowing the viewport - text that is too large or too small - headings wrapping badly - buttons that are too small or difficult to tap - buttons or links overlapping each other - broken navigation - mobile menu problems - grids that do not collapse correctly - cards becoming too narrow - forms that do not fit the screen - images overflowing or becoming distorted - incorrect image aspect ratios - fixed widths that break smaller screens - excessive padding or spacing - content touching the edges of the screen - tables or wide content - modals or dialogs that do not fit - sticky/fixed elements covering important content - footer layout problems - elements hidden unintentionally on mobile Also inspect the responsive CSS/Tailwind classes and identify the root cause of each issue. Do not redesign the website. Do not change the visual identity. Do not modify desktop layouts that already work unless a shared change is genuinely required. Finish with: 1. Critical mobile issues 2. Medium-priority responsive issues 3. Minor polish issues 4. The components/files responsible for each problem 5. A short recommended fix plan

Fix the Issues

Now fix the problems using the existing design system and project structure. The goal is not to create a separate mobile website — the same website should adapt naturally to different screen sizes.

Fix Responsive & Mobile Issues

Fixes the audited issues with the smallest safe changes — overflow, grids, typography scale, spacing, tap targets, navigation, forms, images, cards, modals, and sticky elements — reusing the project's existing responsive system (Tailwind breakpoints or whatever it already uses) without rebuilding the site or hiding functionality, then runs the production build and lists every file changed.

Fix the responsive and mobile issues identified in the audit. Preserve the existing design, branding, content, functionality, and desktop experience. Use the smallest safe changes. Prioritize: - removing horizontal overflow - making layouts fit small screens - improving responsive grids - making typography scale appropriately - improving spacing on smaller screens - making buttons and interactive elements easy to tap - fixing mobile navigation - keeping forms usable on mobile - making images responsive without distortion - making cards and sections stack naturally - keeping dialogs/modals inside the viewport - preventing sticky or fixed elements from blocking content Reuse the project's existing responsive system. If the project uses Tailwind, use its existing responsive breakpoint conventions. If the project uses CSS modules, styled components, or another styling system, follow the existing project pattern. Do not: - rebuild the website - introduce a second mobile-only version - replace working components unnecessarily - globally shrink everything just to make it fit - hide important functionality on mobile as a shortcut - change unrelated pages After making the fixes: - run the project - run the production build - check for layout or runtime errors Finish with: Responsive fixes: COMPLETE / NEEDS REVIEW Then list the files and components changed.

Check the Navigation

A website can technically fit on a phone and still be frustrating to use. Now focus on how a real visitor moves through it. On smaller screens, confirm that users can easily:

Open the menu

Close the menu

Navigate to every important page

Return to the homepage

Access the primary call to action

Scroll without the menu blocking the page

NOTE

If the site already has a mobile navigation pattern, improve it rather than replacing it unnecessarily.

Run the Navigation & Usability Prompt

Mobile Navigation & Touch Usability Review

Checks mobile menu behavior, tap target sizes and spacing, sticky header behavior, forms, dialogs, and keyboard behavior, and makes sure the visitor can comfortably complete the site's main action (contact, booking, sign-up, login, purchase, or form submission) on a phone — fixes only genuine problems, runs the production build, and answers Mobile usability: PASS or NEEDS REVIEW.

Review this website specifically for mobile navigation and touch usability. Fix genuine problems while preserving the existing design. Check: - mobile menu open/close behavior - menu button visibility - navigation links - dropdowns - primary CTA visibility - sticky header behavior - tap target sizes - spacing between interactive elements - buttons near screen edges - forms and form controls - dialogs/modals - close buttons - accidental overlap between fixed elements - keyboard behavior where relevant Make sure the user can complete the website's main action comfortably on a phone. Examples include: - contacting the business - booking - signing up - logging in - purchasing - submitting a form Do not add new features. Do not redesign the navigation unless the current implementation genuinely cannot work responsively. Keep desktop behavior unchanged where it already works. Run the production build after the changes. Finish with: Mobile usability: PASS / NEEDS REVIEW

Test Common Screen Sizes

Do not test only one screenshot or the homepage. Test the actual website across several widths and important user flows. Check approximately:

375px — smaller phones 390–430px — common modern phones 768px — tablets 1024px — smaller laptops/tablets Desktop

You do not need to make the website perfect for one specific phone model. The layout should adapt smoothly between screen sizes.

Run the Final Responsive Audit

Final Responsive-Design Audit

Tests every important page and component across small mobile, large mobile, tablet, laptop, and desktop widths plus the main user journey at mobile width, confirms desktop layouts and the production build are undamaged, and answers Responsive status: READY or NOT READY, listing exactly what remains if not.

Run a final responsive-design audit for this website. Test all important pages and reusable components across small mobile, large mobile, tablet, laptop, and desktop widths. Verify: - there is no unintended horizontal scrolling - navigation works at every breakpoint - headings and text remain readable - buttons remain visible and easy to use - grids and cards adapt correctly - images remain proportional - forms fit the viewport - dropdowns and modals work - sticky/fixed elements do not cover content - important CTAs remain accessible - no content disappears unexpectedly - desktop layouts have not been damaged by the mobile fixes - no important browser console errors were introduced - the production build succeeds Also test the website's main user journey from start to finish at a mobile width. Do not make cosmetic changes unrelated to responsive usability. Do not deploy anything automatically. Finish with: Responsive status: READY / NOT READY If NOT READY, list only the remaining responsive problems.

Final Check

Before publishing, manually open the website on a real phone if possible. Test the main action a visitor is supposed to complete.

Your website should now provide the same core experience whether someone visits from a phone, tablet, or desktop.