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.  

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>