Adjust footer position

[blakes24]

Overview

We need to move the footer to a fixed position at the bottom of all pages so we can have a consistent look for the page footer no matter the width of the page (all breakpoints).

• Redirect page: issue is present for all screen sizes

Redirect Page screenshot

• 404 page: observed for screen widths between 480px and 767px, above 1453px, and in ipad pro view from chrome dev tools (screen height also affects whether the footer is above the bottom of the page)

404 Page screenshot

• Project page: screen widths above 768px it is possible to scroll past the footer when projects are filtered to a single row of results

Project Page screenshot (filtered to only show 2 projects)

Action Items

• Adjust footer position so that it is always at the bottom of the page (fixed position at the bottom of each page)
• Ensure that the correction doesn't break any other pages that are connected to your changes

Resources/Instructions

footer.html
_layouts/default.html

[github-actions]

@Abel-Zambrano

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, October 5, 2021 at 12:02 AM PST.}

[Abel-Zambrano]

Progress: Fixed footer on 404 page.
Blockers: Generating the "redirecting" page.
Availability: 5hrs
ETA: 9/13/21

[Abel-Zambrano]

@blakes24 Hello, do you have any steps or a specific link/url that I can use to generate the "redirect" page?

[macho-catt]

@Abel-Zambrano, you can manipulate the line in the code:

<meta http-equiv="refresh" content="0;url={{ page.redirect_to }}" />

Change content from 0 to 5 for example, for five seconds. Change the time to as long as you want so you can look at the page.
Line in code

[macho-catt]

@Abel-Zambrano as @abuna1985 mentioned, the redirect link only works for redirections. For a list of possible redirections, you can refer to this directory in the code: https://github.com/hackforla/website/tree/gh-pages/redirections

Now every time you go to a permalink from that directory (like the donate permalink, which is pointing to /codeforamerica) it will first lead you to the redirect page, then the actual page of redirection. By increasing the seconds from 0 to 5, this redirect page will show for longer.

Thanks!

[abuna1985]

@Abel-Zambrano I found the following issues with both the projects page & wins page

Click here to see projects page gif

Noitice when there is 1 card, the footer goes under the card and the height stays as long as the dropdown filter menu

The footer is not at the bottom

screenshot of footer display error (wins page)

Click here to see wins page gif

Noitice when there is 0card, the footer goes under the blank space and the height stays as long as the dropdown filter menu

The footer is not at the bottom

screenshot of footer display error (wins page)

[github-actions]

@Abel-Zambrano

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, October 26, 2021 at 12:03 AM PST.}

[Abel-Zambrano]

Progress: Complete
Blockers: Waiting for merge approval
Availability: n/a
ETA: n/a

[github-actions]

@Abel-Zambrano

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, November 2, 2021 at 12:03 AM PST.}

[github-actions]

@Abel-Zambrano

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Monday, November 8, 2021 at 11:03 PM PST.}

[Abel-Zambrano]

Progress: Fixed footer on all pages except redirect page.
Blockers: n/a.
Availability: 2hrs
ETA: 11/19/2021

[github-actions]

@Abel-Zambrano

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Thursday, November 18, 2021 at 4:50 PM PST.}

[Abel-Zambrano]

Progress: Complete
Blockers: Pending Review
Availability: n/a
ETA: n/a

[github-actions]

@Abel-Zambrano

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Monday, November 29, 2021 at 11:19 PM PST.}

[Abel-Zambrano]

Progress: Complete
Blockers: Pending Review
Availability: n/a
ETA: n/a