Jumpy Follow Footer

My footer, which is a wide box grouped with one block of text, keeps jumping all around as I check the layouts for all the different devices. Sometimes the page gets longer and the footer is way far down, sometimes the footer is in the middle of the page.

Checked:
Placement
x Follow Footer
x Show on this device

Visibility
x Show on all pages in this section

Originally I had 6 pages in the section, one page was a super long page. I moved the super long page to its own section. The footer still jumped around as I was double checking the layout of each section.

I tried ungrouping the two pieces of the footer, unchecking the boxes, rechecking the boxes. It was crazy. Deleting the footer, pasting it back in and checking the proper boxes again.

I tried command A on all my pages to see if there was a hidden little item somewhere, but there wasn’t.

I finally have the footer where I want it to be and now I am afraid to go back in and check the layout of my pages on the different devices through the Sparkle app.

Fingers crossed it all uploads okay and does not jump around again.

I have Sparkle 3.1.3, working on a MacBook Pro 16 inch 2019
(New February 2020)
Running macOS Big Sur 11.5.2

Hi TheRita,

Here’s some tips that might help you with this problem.

First, make sure you are using the most current version of Sparkle:

Open Sparkle / Apple Menu / Sparkle / Check for updates…

  • There could a particular thing at play on your site but it can take a long time to discover what it is.
  • The method below basically flushes out your footer and creates a new, clean version.
  • While following this method you could also discover something on a particular page that causes the problem.

Here’s how I troubleshoot a misbehaving footer

My goal is to make sure I get my group of elements that I use to create a footer to behave correctly before I share the footer across pages or sections.

I have used this method many times in the past, particularly with sites with lots of pages (20+ pages). It is the fastest method in my opinion.

If you are sharing a footer across sections, then you will have a different footer for each section in your website.

You might want to make sure you have one section for the main footer and one section for the secondary footer.

  1. Make a new page and call it footer (you can actually call it anything you like)
  2. Go to any page that the footer is currently on, and turn off Share on all pages / Share this section only
  3. Cut the footer and paste it onto your new blank page
  4. Alternatively, on your new blank page, you could create a new footer group from scratch

You will now clean up the footer before sharing it to other pages or sections.

  1. Make sure you have the Layers panel open so you can see how your items are interacting with each other
  2. Ungroup the elements that make up your footer and check that each one is NOT set to follow footer
  3. Then realign, as necessary, your elements to recreate your footer, then select all elements and move them to the bottom of the page. Do this for each device type.
  4. When you are happy with the design and position of the footer elements, group them. You might want to name your footer with a logical name, such as Footer 1.
  5. Set the footer group to Follow footer.
  6. Test the page with Preview in Browser.

You will now apply the footer to different sections

  1. Turn off Share across pages or across sections
  2. Duplicate your blank footer page and edit the duplicate footer as necessary
  3. Make a section for your main pages
  4. You already have a section for your secondary footer
  5. Share each footer to the desired section
  6. Check each page for page height and manually adjust if/where necessary

Test by previewing in Browser.

Notes:

  • As a rule of thumb, on the blank page I use to make my footer I set the page height of each device type to about 1600 pixels.
  • There should be no footer groups remaining on your the rest of your site while following this method. If you want to preserve a copy before preceding, paste one into a new blank document.
  • You can turn off publishing for the blank page(s) but still use this/them for your ‘clean slate’ page to make edits in the future.

I hope this is helpful.

4 Likes

Thank you Chris! Definitely very helpful. I will give it a try the next time I experience the issue.