Code From Third-Party Sites

If you add code from a third-party site (such as Google, YouTube, Twitter, etc.) to your site, please ensure that it is responsive.  Simply resize the browser window to see what it looks like at different sizes.  

NoteSince there are some occurrences where the editor will either strip out or modify custom code,  you may need to change your editing preferences to prevent this.

Example

One of the sites in our web system added two different snippets of code from third-party sites which was not responsive.  One was from Google maps and was used to display a map of their location.  The other was from Issuu which was used to highlight the departments publication.  When the browser window was small enough, the images embedded in the code would overlap outside of it's container (the right column).    

ENT_sample.png

 

To fix this issue a max-width of 100% was added to each snippet of code.

style="max-width: 100%;"

 

Here is what the original code looked like:

<div class="issuuembed" style="width: 225px;  height: 146px;" data-configid="11452313/7325344"></div>

and 

<iframe frameborder="0" src="https://www.google.com/maps/" height="300" width="250" style="border:0; "></iframe>

 

Here is what the modified code looks like:

<div class="issuuembed" style="width: 225px; height: 146px; max-width: 100%;" data-configid="11452313/7325344"></div>

 and

<iframe frameborder="0" src="https://www.google.com/maps/" height="300px" width="250px" style="border:0; max-width:100%;"></iframe>

 

Related content
Editing Preferences