HTML embed positioning incorrectly

[DJCraig]

I'm trying to embed a Google Calendar into a page on Adobe Muse. In the design view, it looks perfect, but when I switch over to preview, or publish the page, the div containing the custom HTML is moving itself to a totally different place on the page than where I placed it.

Here's the link:

ATG Schedule

That Google Calendar iframe should be centered on the page. I put a red stroke around the iframe in an attempt to help diagnose the problem, and you can see that the red stroke doesn't even match the size of the iframe. I've tried every possible option on the "Pin" settings, and nothing fixes it.

Any suggestions?

What it should look like (and how it appears in design view):

What it actually looks like when published:

[ankushr40215001]

Hey DJCraig,

Very odd, can you please share this page (.muse file) with us for lookup?

For sharing the file you can follow the steps explained here - https://forums.adobe.com/docs/DOC-8652.

Thanks,

Ankush

[DJCraig]

Here is the link to the muse file:

Dropbox - ATandG share.muse

[Günter Heißenbüttel]

Placing the Google calendar iframe code here works without issues.

Did you set the HTML element to „Resize: None“ to make it work properly? When I look at your page, I bet, it is set to "Resize: Responsive Width“. What won’t work with the given code.

Did you place the iframe breakpoint-wise to its correct position.

[DJCraig]

I just tried this. It was, indeed, set to "Responsive Width", but changing this to "None" did not fix my problem. It's still doing the same thing.

[Günter Heißenbüttel · Accepted solution]

The calendar works fine! You only have to place it correctly in your widest breakpoint and set the element to 800 x 600 px using the „Transform“ panel. The slight mismatch at the bottom of the iframe can be  hidden by giving the object the same blue background colour as the calendar frame has.

By the way: The calendar element is still set to responsive width in your widest breakpoint.

A bigger issue is the fact, that your calendar bleeds outside your breakpoint, when you resize the browser window or drag the scrubber (this grey vertical handle top right of the breakpoint bar.

Since the iframe code isn’t responsive you have to manually keep it within your breakpoint width.