I am having an issue on a new responsive website where data I have placed inside <iframe></iframe> is popping out on an iPhone and displaying all over the page. It's a multi-record section for displaying news. It works on laptops, tablets, and Android. It's just the iPhone, as far as I can tell, where the news titles are popping out all over the screen.
Here is the link to the site (test): http://rossini.us/kuecker.com/. The problem is with the News inset about 1/2 of the way down the page. Here is the code around the iframe:
<div class="col-md-4">
<div class="icon-box-small" style="height: 300px;">
<i class="fa fa-comments main-bg filled shape"></i>
<div class="icon-sm-desc">
<h3 class="bold uppercase">Company News</h3>
<iframe src="company_news_inset.php" width="250" height="250" scrolling="yes" style="background-color:#f7f7f7;"></iframe>
</div>
</div>
</div>
The iframe is displaying a file (company_news_inset.php ... attached to this post) with the following code for the news:
<table style="background-color:#f7f7f7; width:233px; height: 300px;">
<tr>
<td>
<?php foreach ($newsRecords as $record): ?>
<a href="<?php echo $record['_link'] ?>" target="_blank"><h5><?php echo $record['title'] ?></h5></a>
<?php endforeach ?>
<?php if (!$newsRecords): ?>
No records were found!<br/><br/>
<?php endif ?>
</tr>
</table>
I have attached an image of the display problem. If anyone knows what is the problem, I would certainly appreciate it. Also, I believe if I just limit the number of records that displays to something like the first 5, that may not be the most elegant solution, but, it would at least solve this problem for the time being.
Can someone show me how to rework the code where I call the titles so that only 5 records display?
Thank you.