1
Media Query Breakpoints
Detects layout changes triggered by media query breakpoints, ensuring consistency across viewport widths.
20 test cases
Responsive
Responsive design ensures your site works across all screen sizes. A broken breakpoint or a misconfigured container query can render your page unusable on certain devices. Delta-QA tests your layouts at multiple viewport sizes to catch responsive regressions.
What we detect
2
Container Queries
Monitors @container rules that adapt component styling based on parent element dimensions.
3
Viewport-dependent Layouts
Catches changes in elements using viewport units (vw, vh, dvh, svh) and viewport-relative sizing.
4
Responsive Images
Tracks changes in image sizing, aspect-ratio, and srcset-driven rendering across breakpoints.
Live example
See exactly what Delta-QA detects. Compare the two versions side by side.
Before
After
Real-world scenarios
🎯
The grid that stacks wrong on tablet
A developer changes the responsive breakpoint from 768px to 480px. On desktop and mobile (375px), everything passes. But on tablet (768px), the 3 feature columns are now crushed — text is unreadable, images overlap. Your iPad visitors see a broken site. The tester checked desktop and mobile, not the in-between sizes. Delta-QA captures the site at each breakpoint and compares screenshots: the crushed columns and overlaps on tablet stand out in the diff.
⚠️
The hamburger menu that won't open
The mobile menu (hamburger) works perfectly at 375px. But at 820px (iPad), the desktop menu displays instead... except it overflows the screen because it's designed for 1024px minimum. Menu items are cut off, your iPad visitors can't navigate. Manually checking every component at every breakpoint is unrealistic. Delta-QA captures the site at 820px and compares screenshots: the menu overflowing the screen jumps out immediately in the diff.
💡
The text that becomes too small
A developer adjusts a media query and the mobile font-size (14px) now applies up to 1024px instead of 768px. On a laptop, all text is slightly too small — visitors squint without understanding why. The developer was testing on a 1440px screen, everything looked fine on their end. Delta-QA captures the site at 1024px and compares screenshots: the shrunken text and resulting layout shifts stand out in the overlay.
Ready to catch every visual regression?
Download Delta-QA and start detecting CSS changes in your web pages — no code required.