title: How can I get an iframe to work on both desktop/laptop and mobile devices?
body: <p>My site is <a href="http://www.familyhistoryconferencenwq.org" rel="nofollow">www.familyhistoryconferencenwa.org</a></p>
  
  <p>I have a MacBook Air, an iPhone 5 and an iPad Air so I phrase this for iOS 8.1.1 but obviously I want the solution to work for all tablets and smart phones across all platforms.</p>
  
  <p>On the "Class Schedule" page of the site I have an iframe that works correctly on my MacBookAir running OS X Yosemite (10.1.1) but on my iPad Air and iPhone 5 running iOS 8.1.1 the frame width displays improperly. It extends to the right beyond the right edge of the page. If you visit the site on a a desktop or laptop then on a mobile device you should see what I mean. </p>
  
  <p>My question is: what code do I use to get the iframe to display properly on mobile devices? </p>
  
  <p>The relevant code is:</p>
  
  <pre><code>&lt;div style="text-align: center"&gt; 
  &lt;iframe src="url"; frame-border="1"; height="600px"; width="100%"&gt;
  &lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As I said, this code works correctly on the MacBook Air. The iframe occupies the width of the page. But on the iPhone and iPad the frame extends beyond the right border of the page. What am I doing wrong? (By the way, if I set the height to 100% I inexplicably get a frame about 200 px high although the source document takes 600px to view all of it.)</p>
  
  <p>I've consulted two texts on HTML coding, searched other forum sites on the web and searched this site for the answer to similar questions but have had no luck. I've seen the item "Iframe on mobile devices problematic" on this site but I'm really hoping that I'm not stuck with that for an answer.</p>
  
  <p>Any help will be greatly appreciated.</p>
  
  <p>Thanks</p>
  
  <p>Steve</p>