Why check three widths?
Most links shared in chat apps are opened on a phone, yet most pages are built on a laptop. The usual failures only appear on a narrow screen: a fixed-width table that forces sideways scrolling, an image wider than the viewport, a navigation bar whose items wrap onto three lines, or text rendered at desktop size and then shrunk to unreadable. Seeing phone, tablet and laptop side by side shows all of that at a glance.
The fixes that solve 90% of mobile problems
- Add
<meta name="viewport" content="width=device-width, initial-scale=1">— without it phones render a 980 px desktop page and zoom out. - Add
img, video { max-width: 100%; height: auto; }so media never overflows. - Replace fixed widths (
width: 900px) withmax-width. - Wrap wide tables in a container with
overflow-x: auto. - Use a CSS media query, e.g.
@media (max-width: 600px) { … }, to stack columns.
Testing a published link
After you publish on HTMLtoLink, paste the URL here. Published pages can be framed, so they always render in the viewer — handy for a final check before you send the link to a class or a client. For the full picture, open it on a real phone by scanning its QR code.