Responsive iTunes App Ad

When redesigning a site, I was having trouble getting one section to fit on an iPhone 5 without horizontal scrolling. It turns out that there were two issues, one with the Facebook widget and—rather ironically—one with the iTunes App ad.

The ad is in an iFrame and the dimensions are hard coded. e.g.

echo "<iframe src='https://banners.itunes.apple.com/banner.html?partnerId=0419Dm&amp;aId=&amp;id={$app_ID}&amp;c=us&amp;l=en-US&amp;bt=catalog&amp;t=catalog_white&amp;w=300&amp;h=250' style='overflow-x:hidden;overflow-y:hidden;width:300px;height:250px;'></iframe>";

Changing the dimensions either results in a cropped ad or nothing at all. I did however, stumble upon a solution. I reset the iFrame to 80% of the view window.

iframe {
  max-width: 80vw;
  max-height: 80vw;
}