Knowledge base

    How to correct a heatmap when a page header isnt rendering correctly

    How to correct a heatmap when a page header isn't rendering correctly

    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. 

    Related articles

    Malmö office

    Djäknegatan 9

    211 35 Malmö

    +46 (0)40 44 10 10

    Stockholm office

    +46 (0)8 88 20 20

    Extellio International AB, Djäknegatan 9, 21135 Malmö, Sweden