HubTools

Responsive Design Tester

Test your website at different viewport sizes for responsive design.

What is Responsive Design?

Responsive design is the practice of building web pages that adapt their layout to whatever screen size the user has — same HTML and CSS, different presentation. The pattern was popularized by Ethan Marcotte in 2010 and is now non-negotiable: mobile traffic surpassed desktop globally in 2017, and Google switched to mobile-first indexing in 2019, meaning the mobile version of your page is the canonical version it ranks. The technical building blocks are fluid grids (percentages orfrunits instead of fixed pixels), flexible images (max-width: 100%), and media queries that swap layouts at well-defined breakpoints (typically ~640px, ~768px, ~1024px, ~1280px). This tester loads any URL into multiple viewport iframes side by side so you can see all your breakpoints at once. Audit a page against Google's mobile criteria with the Mobile-Friendly Test. Build the design tokens that drive your responsive layouts in the Color Picker.
Responsive Design Tester
URL
iPhone SE (375x667) iPhone 14 (390x844) iPhone 14 Pro Max (430x932) iPad Mini (768x1024) iPad Pro (1024x1366) Laptop (1366x768) Desktop (1920x1080)
iPhone SE — 375x667
Enter a URL and click Load to preview

How to use this tool

  1. 1
    Enter a URL
    Paste any public URL — staging, production, or a localhost dev server (with appropriate CORS).
  2. 2
    Pick viewports to compare
    Select preset device sizes (iPhone, Pixel, iPad, desktop) or define custom width/height pairs for your project's specific breakpoints.
  3. 3
    Rotate to landscape
    Click the rotate icon on any viewport to swap portrait ↔ landscape. Test both — many layouts surprise on phone landscape.
  4. 4
    Spot regressions
    Look for content overflow, broken navigation, illegible text, or touch targets too close together at small sizes.

Frequently asked questions

Why test at multiple viewport sizes?
Mobile devices account for over 60% of global web traffic, and Google indexes mobile-first since 2019 — the mobile version of your page is the canonical version. Layouts that look fine at desktop widths can break at mobile breakpoints (overflow, illegible text, touch targets too close together). Side-by-side preview catches these regressions at design time.

Related tools

Screenshot Mockup Generator
Create stunning device mockups with beautiful gradient backgrounds. Export for App Store, Product Hunt, and social media.
Open
Color Picker
Flagship color tool with OKLCH/LAB/HSV/CMYK formats, 8 harmonies, interactive wheel, WCAG + APCA contrast, color blindness simulation, and design-system export.
Open
Gradient Generator
Create beautiful CSS gradients with a visual editor. Linear, radial, and conic gradients with presets.
Open
CSS Animation Generator
Create CSS animations visually with keyframes. Preview animations and export clean CSS code.
Open