How to correct a heatmap when a page header isn't rendering correctly
- Customer Success Team
- Dec 11, 2025
- 1 min read
If the web page has elements set to a 100% of the browser height or uses parallax scrolling, the heatmap might display incorrectly. The header may appear stretched across the entire heatmap, obscuring other parts of the web page. To fix it, you can set a maximum height on the element using CSS or JavaScript. For instance:
.hero{ max-height: 1000px; }
If you want to set this style only for heatmaps, you can prefix the selector with "html.matomoHeatmap":
html.matomoHeatmap .hero{ max-height: 800px; }
This is only an example, set the height based on the most common screen resolution among your visitors.
Setting the element height using vh units can affect the screenshot. We recommend setting the elements to fixed percentages or pixel height values for specific view ports.