Lite is free. Pro adds the quality layer on top.
Check the layouton a phone.
Three widths and a short list of faults catch most layout problems before a visitor does.
// the steps
Six steps
01 Open device modeIn your browser developer tools, switch to the device toolbar. Set the width to 375 pixels.
02 Scroll the whole pageLook for a horizontal scrollbar. Any sideways scroll means something is wider than the screen.
03 Read every short labelButtons, chips and tabs should sit on one line. A label that folds looks broken.
04 Look at heading line countsA headline that runs to four lines pushes content down. Shorten it rather than shrink it.
05 Repeat at 768 and 1280Tablet width is where grids most often break. Check rows are full and cards are equal.
06 Tap the real thingTouch targets should be at least 44 pixels. Try forms with the on screen keyboard on a real phone.
// with adams
Where Adams fits
The three widths, automatedProPro opens the page at 375, 768 and 1280, names each overflow, wrapped label and uneven card with its element, and repeats until clean.
// faq
Questions
Why those three widths?
They stand for a phone, a tablet and a laptop. Most layouts break first at one of them.
Is device mode enough?
It catches layout, not performance or touch feel. Test on a real device before launch.
What about landscape?
Check it if your users hold the phone sideways, such as for video.
// related