I sell HTML templates. Yesterday I found out that every mobile preview in every one of my product listings showed the product broken — cards clipped off the right edge, text cut mid-sentence, a button sliced in half.

The templates were fine. The screenshots were wrong.

Here is what happened, because the failure mode is quiet and I suspect it is common.

The setup

I take product screenshots with headless Chrome, which is the obvious thing to do:

chrome --headless = new --hide-scrollbars \ --window-size = 390,900 \ --screenshot = mobile.png \ https://example.com

Enter fullscreen mode

Exit fullscreen mode

One command, no dependencies, runs on any machine. For desktop widths it is perfect. I had twenty of these in a script and never looked twice.

The failure

At 390px the output looked like this: the page laid out, but every card ran past the right edge of the image.…