All things Shopify and commerce
Hello,
I'm trying to embed a Google Sheet with on of my Shopify Pages, but the outcome looks horrible.
Please see example here: https://r2qz5ifjvtjyzvba-50834112675.shopifypreview.com/pages?preview_key=ad1acd81e626d0bd72bb843a5e...
How can I change the width and hight of the "viewable" area, if that makes any sense?
HTML CODE:
<iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vT74XpLlBXF1XIF0yb2jdPcofLUcQlVkBPumd9LwAm0eWuLEAGuE...>
Many Thanks,
London Disc Golf Community
Hi @LondonDGC ,
The first step is to have the following code added instead of only the embed code:
<style>
.container {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="container">
<iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vT74XpLlBXF1XIF0yb2jdPcofLUcQlVkBPumd9LwAm0eWuLEAGuEf0jT9V_GrZdFEwu44dWFRehSd5L/pubhtml?gid=2061148536&single=true&widget=true&headers=false"></iframe>
</div>
This would fit the Iframe to the page's container.
Let us know how it works out for you!
Hi K&J
Thank you very much, that solved most of the issue, there's still some minor bits still not fully functional.
Updated Link: https://r2qz5ifjvtjyzvba-50834112675.shopifypreview.com/pages?preview_key=ca67c64ad08aa974bd6cb1b205...
Many Thanks,
@JHKCreate Just following up to see if you can help with the last two questions please?
Hi @LondonDGC !
Would you mind resharing a new link?
Hi @JHKCreate
Of course, please see here:
Preview Link: https://7bspk845e9dp9025-50834112675.shopifypreview.com/pages?preview_key=c49edba484d06d06ec8fa36abe...
Code:
<style><!--
.container {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
--></style>
<div class="container"><iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vT74XpLlBXF1XIF0yb2jdPcofLUcQlVkBPumd9LwAm0eWuLEAGuE...>
Hi there, wonder how did you achieve the second question above?
"How can I make the user scroll down the page instead of scrolling within the page? (I want to expend the length of the page so the sheet fits without scrolling)
"
Thanks in advance.
Hi! can you help me also with my google sheet ? where should i post that code😄
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024