I'm trying to embed a google spreadsheet on my Square Space website. Unfortunately, the spreadsheet I get has horizontal and vertical scroll-bars whenever I switch to mobile view
<div class="sqs-block-content">
<iframe width="100%" height="800" src="https://docs.google.com/spreadsheets/d/1BxfLMwwEWjyV-Avp9cWupPnJiwVq3GX6VcVRYuw-XQ0/pubhtml?single=false&widget=false&headers=false" scrolling="no" ></iframe>
</div>
How to make the spreadsheet responsive so that it fits on the iframe (thus, there will be no scroll bars as all the columns are visible)?
EDIT:
Is it possible to manipulate the inner html(html body of iframe) using jquery? I believe there should be a way or some way to achieve what I want.
I tried with some jquery libraries as well still no luck...
If you want to reduce the size and content of the
<iframe>
, try the following:width="100%" height="800"
from your<iframe>
then, add the following to your CSS: