Scrollbars being created on Google Docs iFrame

[tlujan0001]

I've read through many posts, and still can't seem to get this right.  Here is the code i've inserted into my html block:

<div class="googledoc-responsive">
<iframe src="https://docs.google.com/spreadsheets/d/1BQxqbxMUDiUJJtYkEVZq3UwEWNzFuk5LzOGPNXxY0Xg/pubhtml?gid=571588927&amp;range=A114&amp;chrome=false&amp;single=true&amp;headers=false" overflow="hidden" width="300" height="350" frameborder="0" scrolling="no" allowfullscreen=""></iframe>
</div>

and here is the CSS I've inserted in the theme's main.less section:

.googledoc-responsive{
    overflow:hidden;
    padding-bottom:75%;
	padding-top:35px;
    position:relative;
    height:0;
	background: #000000;
	overflow:hidden;
}
.googledoc-responsive iframe{
    left:0;
    top:0;
    height:320;
    width:284;
    position:absolute;
	background: #000000;
}

and yet, when I view on mobile, scrollbars still magically appear.  Any thoughts?

[Adam7]

Just a guess, but the content of the iframe probably has a min-width which is set larger than your defined width for mobile.