Broken footer with Muse

[EricaBuki]

I've been using Muse for several years and I have always had this issue. My footer kind of floats when you load the page, but if you resize the browser it'll find its right place at the bottom. I've always considered it a glitch, but nothing has been solved with any updated. Am I doing something wrong? Has anyone else had this issue or know a fix?

You can see what I'm talking about on my website at www.ericabuki.com

Thank you!!

[Günter Heißenbüttel]

The gallery in the middle of your homepage, is it a 3rd party widget?

If yes: what happens, if you delete it?

If the issue persists, do the following: Reduce your existing site to only one page, the "home"page, and delete the gallery elements, so that only the menu and the "misbehaving" footer is left. (This is helpful, because it saves download- and analysing-time).

Upload this .muse file to Dropbox or a similar file sharing service and provide the download link here. Then we can have a closer look.

Thus, time consuming „question and answer“ games or pure guessing can be considerably reduced.

[EricaBuki]

The gallery is not a 3rd party widget; however I do use some widgets on my site. I just deleted them and did a preview and that did not fix the problem. I just deleted one of them because it wasn't really necessary and it helped it look a little bit better on the About page, but the problem isn't gone.

The gallery is instead made up with images and hover images. I have a widget on the master page that allows for a fade, but I had deleted it and ran a test and that did not work. Any other suggestions?

[Günter Heißenbüttel]

Yes. Do what I suggested. Give us a small(!) sample .muse file on dropbox, as I already told. It should be quite easy. to delete all pages except the home page and delete the images in the middle.

[EricaBuki]

Ok, here's the dropbox link: Dropbox - TestWebsite.muse

From what I can tell, this seemed to work, but I'm not sure to apply this to my existing website.

[Günter Heißenbüttel]

This is indeed working. Now simply add the deleted elements back to this page, until you find the "gangster".

Then add only this "badly behaving" element onto the page you already uploaded to Dropbox and re-upload it again.

[EricaBuki]

I started by adding in only one image. No hover, no link, etc. Just this alone seems to have broken it.

You can see what I mean here: Dropbox - TestWebsite.muse

[Günter Heißenbüttel]

• Go from breakpoint to breakpoint on layout and master pages.

• Right click at every(!) breakpoint on your page and choose "Page Properties" from the contextual menu, or choose "Page Properties" from the "Page" menu.

• Choose "Sticky Footer" (in German = "Footer immer unten") for every single breakpoint.

• Now it should work.

It is often forgotten, that the footer position can vary from breakpoint to breakpoint.

[EricaBuki]

Hey -- sorry for the delay on my end! Those options have already been set, unfortunately. So that will not fix this problem.

[Günter Heißenbüttel]

Just look here: http://eb-test.businesscatalyst.com/index.html

What I did: I deleted the 320 px breakpoint on master and on layout page. This breakpoint contradicts your minimal page width definition of 320 px (a minimals page width can’t be "responsive", it is minimal.. I don’t know, if this is the real reason, of if it is simply coincidence, but in this case, it seems to work.

I will post this example in the Muse prerelease forum. Perhaps we get a comment of a Muse engineer.

PS: Seems interesting, that normally your issue only happens if you open your site in browser the first time.

[EricaBuki]

I appreciate your time helping me with this! Unfortunately, the link you sent me still appears to be broken on my computer. For now I'll just leave it, and maybe one day a Muse engineer will figure out how to resolve this.

Anyway, thanks again! Much appreciated.

[ankushr40215001 · Accepted solution]

Hello,

Sorry for stepping in late.

However, I am able to replicate this issue and found that footer only breaks when you are setting an image frame to "responsive width and height" and including breakpoints in that file.

I will forward this to the engineering for further investigation.

Meanwhile, as a workaround, you can draw a rectangle and fill the image instead of directly placing it over.

This works fine even if you set the image as  "responsive width and height".

Regards,

Ankush

[Günter Heißenbüttel]

Please, read my answer completely:

"Seems interesting, that normally your issue only happens if you open your site in browser the first time."

And exactly this is the case here on Safari (Desktop and mobile) and Chrome. Very often it works directly from the beginning, sometimes after resizing the window and sometimes after reloading.