This article explores the common reasons for why the responsive web embed code may fail to resize content correctly.

Pre-live checks

• Make good use of the staging, add destinations for all the channels you intend to go live with.
• Test the embed code in a staging-site and ensure it reacts appropriately on popular mobile devices.

1. Check Pre and Post Tracking Scripts

1. Login to the platform and click the settings icon c.
2. Check that the 'Pre Tracking Script' and 'Post Tracking Script' (if used) contain valid JavaScript. The website jshint.com is very useful in determining potential issues in your code.

2. Check that HTML used on your Pages is formatted correctly

Badly formatted HTML can cause issues with the display of your campaign and cause unexpected issues with responsive embed campaigns.

Another sign the badly formatted HTML is present, occurs when you can see all pages at once in a long single format.

1. Open your experience campaign.
2. Click Pages l on the left side.
3. Open each page and check for any invalid HTML present in any of the module fields, you can check invalid HTML by pasting in your code here.

3. Check for long hyperlinks

Using HREF HTML code with a long visible label can cause the boundary of the iFrame to be extended, for example:

<a href="http://www.mysite.com/docs/legal/campaign/quiz/enduser/terms&conditions.html">http://www.mysite.com/docs/legal/campaign/quiz/enduser/terms&conditions.html</a>

The solution is to use a phrase that's much shorter in the label:

<a href="http://www.mysite.com/docs/legal/campaign/quiz/enduser/terms&conditions.html">Click here for T&Cs</a>

This is because browsers will not 'break' a URL onto a separate line. 

4. Check for any invalid javascript customisation

1. Open Experiences 9, locate your experience and click on the title.
2. Click Advanced, then click Customize Z.
3. Click Edit e to right of 'custom javascript'.
4. If any JavaScript is present, use the website jshint.com to determine any potential issues in your code.

All JavaScript must be enclosed in script tags: <script></script>.

5. Testing with the staging display link

1. Open Experiences 9, locate your experience campaign and click on the title.
2. Click Publishing &, scroll to the bottom of the page.
3. Under 'testing', click &.
4. Test this link on a variety of devices, if the responsiveness issues do not occur here, this can mean that the outer page (the micro-site or hosting page) is influencing the issue.

6. Test the embed on an empty HTML file

1. Open Experiences 9, locate your experience campaign and click on the title.
2. Click Publishing &, scroll to the bottom of the page.
3. Under 'testing', click 'Add testing destination' +.
4. Select 'embed', select 'responsive'.
5. Set the dimensions to 100 x 100.
6. Click Next then click Save.
7. Click 'get the embed code'.
8. Click Copy Î.
9. Open the attached template file below 'iframe-test.html' in a text editor.
10. Paste in the code to replace line 11.
11. Save the file.
12. Open the file in your browser to see how it responds. This may provide some further insight into why the experience campaign is not responding as expected.

7. Lastly, Analyse the browser console for errors

1. Open Experiences 9, locate your experience campaign and click on the title.
2. Open your experience campaign link on your staging Facebook tab or staging web embed location.
3. Click Publishing D, scroll to the bottom of the page.
4. Open the browser console. This website covers the common ways to open the console on a variety of browsers.
   
   Understanding the console can be very tech heavy, but should provide your web development team with some insight as to what could be occurring. Including errors that occur here would also help our Support team.