When zooming, footer jumps far down page

[tedats1]

Hi folks,

I'm trying to figure out which item on the page is causing the footer to jump so low when testing responsive design.

It's only on the home page this happens. I've tried deleting all items on the page, and that fixes the problem..lol. I've recreated the page item by item and can't find which is causing this.

www.eposnorth.co.uk/New2017

I'm not a pro. Hoping it's something easy!

Thanks!

Thomas

[Günter Heißenbüttel]

This is probably a layout issue. Please do the following:

Delete all pages but one, try to delete as many elements (images, text, widgets) as possible, so that only a few objects and your issue is left, and share this .muse file with us. This simplifys analysing you file considerably. (if you don‘t do this, we have to do it.)

Please follow these instructions: https://forums.adobe.com/docs/DOC-8652

[tedats1]

Thanks!

It seems to be this image that’s the culprit.

Is this enough for you to work from?

Sent from Mail<https://go.microsoft.com/fwlink/?LinkId=550986> for Windows 10

[Günter Heißenbüttel]

Let‘s see!

[tedats1]

Dropbox - Epos North Website 2017 v9 For forum min content.zip

Hi Sorry Im not sure if that attached.

Here's a zip folder via dropbox.

Much appreciated!

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

Hmm, I am not really sure, what your issue is:

• Possible issue No 1: Do you really want the page, to be 7710 px long?

If yes: Ok. But it is not really necessary, because pages resize in height automatically, when non footer elements touch the defined footer area. Non footer elements aren’t allowed to be placed in the footer area.

If no: The blue menu item next to the footer at position y=7375 is the „culprit“ for this tall page length. Since Muse pages are dynamic in height, elements, which are not defined as „Footer“ push down the footer area.

• Possible issue No 2: You really want the page to be that long, but you don’t want the blue menu element, which is placed directly above the footer, to shift upwards, when reducing the window size in width, thus causing a „gap“ between the menu element and the footer.

The reason for this behaviour is quite clear:

You set the page height fix to 7710 px, what means, that the page height is not allowed to get smaller. But since the menu item is no footer element, it follows the rules of responsive design and shifts up/downwards in relationship to the layout elements above. Since the image scales proportionally, it shrinks in width and height, when resizing the browser window. –> The shrinking height forces the menu item at the bottom of your page to follow –> it moves upwards. The footer elements can’t follow, because they aren’t allowed to do so: In your page properties the „Minimal(!) Page Height“ is set to 7710 px.

• Possible solutions:

a) Define the menu item as a footer element (= check the footer „Footer“ in Muse’s upper control strip). In this case, it would be a good idea, to make the page considerably shorter and place a rectangle to the right of the menu item, which is not defined as a footer element. By repositioning this element in vertical direction you can easily resize the page height.

b) Make your footer area higher on your master page, and place the menu item into the footer area (you have to define it as „Footer“ of course).

Puh! As you see, this is a little bit complicated to explain, but when you try to reproduce my suggestions it will be quite easy!

If you run into problems, please ask!

[tedats1]

Yes!

A little more simple than I would have hoped but thank you very much!

I did say I wasn't a pro ^^.

Very delighted .