# Responsive Design Testing on Phones and Wide Screens

Source: https://maito.app/workflows/check-the-site-on-many-screen-sizes

Maito opens your pages at phone, tablet and desktop widths, spots overlaps and cut-off content, and sends screenshots with what to fix.

See how key pages look on phones, tablets and wide screens.

[QA](https://maito.app/workflows/team/qa) · [Software](https://maito.app/workflows/industry/software) · When you ask · Updated October 19, 2026

Works with

-   Slack
-   Email

## How do you test a site on many screen sizes?

To test a site on many screen sizes, tell Maito which pages to check. It opens each page in a browser at phone, tablet and wide-screen widths, takes screenshots, looks for overlaps, cut-off tables and wrapped controls, and sends a report with the sizes where each problem appears.

## How it's done today

Mobile issues get reported by customers.

## What Maito does

1.  Open pages at common sizes
2.  Take screenshots
3.  Point out layout problems

## Example

**Priya** (1:05 PM):

check the pricing page on mobile and tablet before tomorrow's launch.

**Maito** (1:14 PM):

I checked northstar.example/pricing at 5 sizes: 360, 390, 768, 1024 and 1440 px. Screenshots attached: pricing-screens.pdf.

• 1440, 1024: fine  
• 768: the sticky header covers the Team plan's price when you arrive from the #pricing link  
• 390: the Annual toggle wraps onto two lines  
• 360: the plan table is cut off. The Business column is hidden and there's no sign it scrolls.

**Catch:** 360 px is the Galaxy A-series width, and it's where the Business plan, your most expensive, disappears.

This is the live page as of now. Want me to send these to Luca, the designer, to decide?

**Priya** (1:20 PM):

yes, copy me.

**Maito** (1:21 PM):

Emailed Luca with the 4 screenshots that show problems, and copied you.

## How to set it up

When you ask Check the site on many screen sizes

Set up

Nothing to set up. Ask in Slack or by email whenever you need it.

## What it won't do

It uses browser widths, not real phones, so device quirks and browser differences can still appear. Looks that are a design choice get flagged only when they look broken.

## Questions

### Which screen sizes does it check?

Common widths from small phones to wide desktops. You can name the exact sizes you care about.

### Can it check pages behind a login?

Yes. Add the login to the Vault (Settings, then Vault) and it signs in first.

### What do I receive?

A document with screenshots and a short list of issues, each with the width where it happens.

## More qa workflows

-   [Test a branch in a real browser before merge Every change gets clicked through in a real browser, with a video. QA · When something happens Works with Slack, Email.](https://maito.app/workflows/test-a-branch-in-a-real-browser-before-merge)
-   [Nightly regression run Your key flows get tested every night, with a report in the morning. QA · On a schedule Works with Slack, Email.](https://maito.app/workflows/nightly-regression-run)
-   [Reproduce a reported bug against the last release Check whether a bug is new, old, or already fixed. QA · When you ask Works with Slack, Email.](https://maito.app/workflows/reproduce-a-reported-bug-against-the-last-release)
-   [Write test cases from a spec Turn a feature spec into a checklist of test cases, including edge cases. QA · When you ask Works with Box.](https://maito.app/workflows/write-test-cases-from-a-spec)
-   [Check for broken links and pages Crawl your site and docs for broken links, missing images and errors. QA · On a schedule Works with Slack, Email.](https://maito.app/workflows/check-for-broken-links-and-pages)

[See all workflows](https://maito.app/workflows)

## Put your AI teammate to work.

Set it up in minutes. Start with this one, and let it earn the next one.

[Put Maito to work](https://maito.app/login?returnTo=%2Fworkflows%2Fcheck-the-site-on-many-screen-sizes)[Book a demo](mailto:support@maito.app?subject=Maito%20demo)