Troubleshoot iFrames
Step-by-step guide to testing and fixing Anedot Action Page iFrame embeds, including an HTML troubleshooting template, height and width adjustments, and tips for preventing unwanted scrolling on desktop and mobile.
If an iFrame on your site is not displaying correctly, use the HTML template below to help identify and resolve issues. This will allow you to test your Action Page embed code in a clean environment.
Instructions
-
Copy the HTML template below.
-
Insert your Action Page embed code between the comment markers:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Anedot iFrame demo</title>
</head>
<body>
<main>
<div>
<!-- iFrame Embed code 👇 -->
<!-- iFrame Embed code 👆 -->
</div>
<footer>
© Anedot
</footer>
</main>
</body>
</html> -
Save the file and open it in your web browser to preview.
Adjusting iFrame Size and Scrolling
To remove unwanted scrolling, set specific height and width values for your iFrame.
Example:
<iframe src="YOUR_URL_HERE" width="100%" height="800" style="border:none;"></iframe>
Tips:
-
Test your adjustments on both desktop and mobile devices to ensure the content fits without unnecessary scrolling.
-
Increase the height if content is being cut off.
-
Use
width="100%"
for responsive designs.