Is your heatmap not looking as it should? Is the header showing across the entire heatmap?
If the webpage 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 webpage. 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 viewports.