Search code examples
htmliframegoogle-sheetsembedsquarespace

Embed Google Spreadsheet on SquareSpace & make it responsive for Mobile

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...

Solution

  • If you want to reduce the size and content of the <iframe>, try the following:

    • remove width="100%" height="800" from your <iframe>

    then, add the following to your CSS:

    iframe {
    width: 396vw;
    height: 3200px;
    border: 0;
    transform: scale(0.25);
    transform-origin: 0 0;
}