Embedded excel iframe not showing properly

Shopify Discussion
1

Embedded excel sheet from onedrive into custom liquid Dawn theme. Sheet hugs the left, too much space on the right. Too big on mobile. Code:

4

Could you paste the embed code? My first guess would be that the parent container or the iframe itself has a fixed width or margin that’s preventing it from centering. If it’s the default OneDrive embed, it often needs a bit of CSS to behave nicely inside a Dawn custom liquid section.

6

Sorry, code:

<iframe width="700" height="900" frameborder="0" scrolling="no"

src=“https://1drv.ms/x/c/6c8c0ee35882df16/IQR7eAetG50FSoIM2l53hL2qAVujfPZTZ44pi6yJmj3It20?em=2&wdAllowInteractivity=False&AllowTyping=True&ActiveCell=‘Sheet1’!K7&Item=‘Sheet1’!H2%3AP128&wdHideGridlines=True&wdInConfigurator=True&wdInConfigurator=True”>
</iframe>

7

Hey @jenney_jones ,

A couple of things stand out in your code.

First, your iframe has a fixed width of 700px, so it won’t scale well on smaller screens. I’d recommend making it responsive instead:

html

This will:

  • Center the spreadsheet (margin: 0 auto)
  • Let it shrink to fit smaller screens (width: 100%)
  • Keep it from exceeding 700px on desktop (max-width: 700px)

The other thing I noticed is that your example uses smart quotes (“ ” and ‘ ’) instead of standard HTML quotes (" and '). If those smart quotes are actually in your code, they can prevent the iframe from working correctly.

One thing to be aware of is that Microsoft OneDrive embeds also have their own layout limitations. If the extra whitespace is coming from the embedded workbook itself rather than the iframe, there may be only limited control from the Shopify side.

If you found my reply helpful, feel free to mark it as the accepted solution so it can help other merchants following this discussion.

Thank You !

8

<div style = "max-width:700px; margin:0 auto;" >
<iframe
style = "width :100% ; height:900px; border:0;"
scrolling = "no"
src="https://YOUR_ONEDRIVE_URL">
</iframe>
</div>

9

Hey @jenney_jones

hope you’re doing well!

It sounds like a CSS issue. Wrap the embedded Excel sheet in a responsive container, set the frame to width: 100%, and use max-width with centered margins (margin: 0 auto) so it displays properly on both desktop and mobile

10

Tried the fixes here. Seems to be a microsoft issue and they have no published fix (that i could find).
Thanks

11

If anyone else wants to take a shot, here’s the website and credentials:
3cd2f0.myshopify.com

4874