Why does my Heatmap show the same screenshot for desktop, tablet and mobile?

If your Heatmap shows the same screenshot across desktop, tablet and mobile, this is usually caused by how your website loads its CSS. Most responsive websites use the same HTML and CSS files for all devices. The layout adapts based on screen size and Heatmaps work well with this structure.

However, some websites load different CSS files depending on the device or screen width. In this setup, the mobile version may load a separate stylesheet from the desktop version. Matomo Heatmaps are not compatible with websites that switch CSS files based on device size. The screenshot could then be overwritten and display the same version across all resolutions.

Creating multiple heatmaps will not resolve this issue if your site loads different CSS files per device. At this time, there is no workaround for websites structured in this way.