We recently made our website dynamic and integrated MS Clarity to enhance our understanding of user experience. However, when reviewing the user session recordings, it appears that the website is displaying as unaligned with oversized elements. I conducted tests on various devices, and the responsiveness and alignment seemed fine during these tests. However, in the session recordings, the website appears completely misaligned. Could someone please suggest how to resolve this issue?
Tried testing the website on various devices to check responsiveness and it looks fine.
Two resources that might help here:
Specifically, some folks have fixed the issue by making all their CSS files use absolute paths.
Some other potential causes of the issue is that your CSS styles are served with the wrong mime type, you have a firewall that blocks Clarity bot from accessing these files, CORS policies blocking Clarity from accessing the file, or you have temporary CSS files that change each build.