# What Responsive Breakpoints Are Tested During the Interaction Sweep

> Learn what responsive breakpoints are tested in the ai-website-cloner-template interaction sweep. Discover how 1440px and 390px are verified for desktop and mobile responsiveness.

- Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)
- Tags: getting-started
- Published: 2026-07-10

---

**The interaction sweep in the ai-website-cloner-template repository tests responsive breakpoints at exactly 1440 px for desktop and 390 px for mobile, capturing full-page screenshots and verifying responsive behavior through scroll, click, and hover actions.**

The ai-website-cloner-template project ensures faithful reproduction of target websites by rigorously testing responsive design across specific viewport dimensions. Understanding what responsive breakpoints are tested during the interaction sweep helps developers verify that cloned sites maintain visual integrity and functionality across different device sizes.

## The Two Primary Responsive Breakpoints

The source code explicitly defines two reference viewports for the interaction sweep. These widths serve as the standard dimensions for capturing full-page screenshots and validating responsive adaptations.

### Desktop Breakpoint (1440 px)

The desktop breakpoint of **1440 px** represents the full-page layout and visual design for large screens. According to the repository's [`README.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/README.md) (lines 122-124), this width captures the complete desktop experience, ensuring that wide-screen layouts, navigation menus, and grid systems render correctly.

### Mobile Breakpoint (390 px)

The mobile breakpoint of **390 px** targets small, mobile devices to verify mobile-specific UI adjustments. This viewport width, also documented in [`README.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/README.md) (lines 122-124), ensures that responsive breakpoints are tested during the interaction sweep for touch-friendly interfaces, collapsed navigation, and stacked content layouts.

## How the Interaction Sweep Validates Responsive Behavior

The interaction sweep performs more than static screenshot capture. As implemented in JCodesMore/ai-website-cloner-template, the process includes **scrolling, clicking, hovering, and resizing** actions at both breakpoints to ensure dynamic elements respond correctly to user interactions.

The [`docs/research/INSPECTION_GUIDE.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/docs/research/INSPECTION_GUIDE.md) (lines 24-25) further emphasizes the importance of capturing these breakpoints to document responsive behavior, ensuring that media queries and flexible layouts function as intended across the two primary viewport sizes.

## Implementing the Breakpoints in Code

Developers can programmatically configure these breakpoints when running automated browser tests. Below are implementations using Playwright and Tailwind CSS configurations.

### Playwright Configuration for Automated Testing

The following TypeScript example demonstrates how to set the exact viewport sizes used in the interaction sweep:

```typescript
// Example: Using Playwright to emulate the two breakpoints
import { chromium } from 'playwright';

async function sweep(url: string) {
  const browser = await chromium.launch();
  const context = await browser.newContext();

  // Desktop viewport
  const pageDesktop = await context.newPage();
  await pageDesktop.setViewportSize({ width: 1440, height: 900 });
  await pageDesktop.goto(url);
  // …perform scroll, click, hover actions…

  // Mobile viewport
  const pageMobile = await context.newPage();
  await pageMobile.setViewportSize({ width: 390, height: 800 });
  await pageMobile.goto(url);
  // …perform scroll, click, hover actions…

  await browser.close();
}

```

### Tailwind CSS Screen Configuration

You can align your CSS framework with the interaction sweep breakpoints using this Tailwind configuration:

```javascript
// Example: Tailwind CSS configuration reflecting the two breakpoints
module.exports = {
  theme: {
    screens: {
      // Tailwind’s default breakpoints + the custom ones used by the project
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      // Custom breakpoints referenced in the interaction sweep
      desktop: '1440px',
      mobile: '390px',
    },
  },
};

```

## Summary

- The interaction sweep tests exactly **two responsive breakpoints**: 1440 px for desktop and 390 px for mobile.
- These dimensions are **explicitly defined** in [`README.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/README.md) (lines 122-124) and referenced in [`docs/research/INSPECTION_GUIDE.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/docs/research/INSPECTION_GUIDE.md) (lines 24-25).
- The sweep validates **dynamic interactions** including scrolling, clicking, and hovering at each breakpoint.
- Full-page screenshots captured at these widths ensure **visual fidelity** across device sizes.

## Frequently Asked Questions

### What is the exact desktop viewport width used in the interaction sweep?

The interaction sweep uses **1440 px** as the desktop viewport width. This dimension is specified in the [`README.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/README.md) file (lines 122-124) as the reference for capturing full-page desktop screenshots.

### Why does the interaction sweep use 390 px for mobile testing?

The **390 px** width represents modern mobile device dimensions, allowing the sweep to verify mobile-specific UI adjustments such as collapsed navigation menus and touch-friendly interface elements. This breakpoint ensures the cloned site responds correctly to narrow viewports.

### Which source files define the breakpoint requirements for the ai-website-cloner-template?

The breakpoint requirements are documented in two key files: **[`README.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/README.md)** describes the screenshot process and viewport widths, while **[`docs/research/INSPECTION_GUIDE.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/docs/research/INSPECTION_GUIDE.md)** (lines 24-25) outlines the need to capture breakpoints for responsive behavior verification.

### What actions are performed during the interaction sweep at each breakpoint?

In addition to capturing full-page screenshots, the sweep performs **scrolling, clicking, hovering, and resizing actions** at both 1440 px and 390 px viewports. These interactions verify that dynamic content and responsive layouts function correctly across different screen sizes.