Highlighted

HTML embed positioning incorrectly

Community Beginner ,
Mar 07, 2018

Copy link to clipboard

Copied

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):

Screen Shot 2018-03-07 at 11.23.16 AM.png

What it actually looks like when published:

Screen Shot 2018-03-07 at 11.23.25 AM.png

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.

Views

241

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

HTML embed positioning incorrectly

Community Beginner ,
Mar 07, 2018

Copy link to clipboard

Copied

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):

Screen Shot 2018-03-07 at 11.23.16 AM.png

What it actually looks like when published:

Screen Shot 2018-03-07 at 11.23.25 AM.png

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.

Views

242

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 07, 2018 0
Mar 07, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 07, 2018 0
Community Beginner ,
Mar 07, 2018

Copy link to clipboard

Copied

Here is the link to the muse file:

Dropbox - ATandG share.muse

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 07, 2018 0
LEGEND ,
Mar 07, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 07, 2018 0
Community Beginner ,
Mar 07, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 07, 2018 0
LEGEND ,
Mar 07, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 07, 2018 0