I have successfully embedded some running results on my GoDaddy website at www.racepros.ca, but they don’t look good on a mobile device. I think I might have embedded an iFrame into an iFrame in Website Builder.
Because the results are quite wide, what I’d like to do is to have them scroll from side-to-side when looking at them on a mobile device. I don’t know much about coding, but do I need CSS to do this?
Here’s the code I inserted into Website Builder’s HTML option. Thanks in advance for your replies.
<iframe id="wshost" width="990" height="1200" src="https://www.webscorer.com/canada?embed=2"></iframe>
Solved! Go to Solution.
The HTML sections are added using an iframe, so adding your own would inevitably be double iframes. It'd be ideal if you were able to edit the file being referenced to be a better fit. If that is not an option you can try tweaking the sizes. If both iframes have overflow (content larger than space alloted) there'd be the double scrollbars, so the key is to either avoid overflow or make sure it is only on the container in which you want scrollbars.
Thanks for the reply Nate. I will try adjusting the iFrame sizes that Webscorer gave me for their content.
Meanwhile, how do I get rid of the iFrame within an iFrame? If I delete the <iframe and </iframe> tags in Website Builder I just end up with a non-functioning link.
Like I said there isn't a way to get around the double iframes, so it's just a matter of tweaking the sizes so that only one has the scrollbars.
Give it a try with these changes, also make sure to force a height on the HTML section that is greater than the height of your iframe (like 1220px).
<iframe id="wshost" style="border: none; display:block; width: 95%; height: 1200px; margin: auto;" src="https://www.webscorer.com/canada?embed=2"></iframe>