0

I'm trying to fit a widget from an external site onto a page, but the width is greater than the parent div, and I'm not sure how to properly resize it to fit. The widget delivers a table, and scrolling is fine on mobile, but even on desktop I'm getting a horizontal scrollbar. My best guess is that I need to target the iframe, but having no luck. Page is here:

https://gridironexperts.com/free-nfl-picks

enter image description here

Any help would be greatly appreciated!

Andrew Fleischer
  • 21
  • 4
  • 1
    The scrollbar is included in the widget itself, you won't be able to remove it as it is not part of your code. The mobile version also has a scrollbar, it's just almost invisible as browsers have tinier scrollbars, but it's still there. Also, instead of iframe-ing the whole website, you could just iframe the widget : https://widget.tallysight.com/orgpicks/NFL/5f1a1a47feb159e19c01f965/5d9e32b04ec3186269fcdf87 You can see in the widget's code that the container has an "overflow" class, which is allowing the scrollbar to be visible, and since it's not your own website, you cant modify that – Pursuable Oct 02 '20 at 21:27
  • 1
    ... what you could try is to rescale the website (basically if you "unzoom" the widget the scrollbar disappear), but that is a weird fix, it will be extremely tiny on mobile and it doesn't work on all browsers https://stackoverflow.com/questions/166160/how-can-i-scale-the-content-of-an-iframe/2224816#2224816 – Pursuable Oct 02 '20 at 21:35

0 Answers0