Fixing footer overlapping the content div #6637

[moazDev1]

Fixes #6637

What changes did you make?

• Modifying _sass\layouts\_main.scss & _sass\components\_footer.scss files.
• First, I tried to change the position of the footer to absolute or static as mentioned in the issue but neither of them worked so I had to look for another approach.
• The approach I took was using Flexbox:
  1. In _main.scss I converted the #app element (footer's parent element) to a flex container using display: flex; flex-direction: column;. This establishes a stack (vertical layout) for its child elements and the footer will be pushed to the bottom since it's the last element.
  2. In _footer.scss I removed the previously used position: sticky and margin-top styles on the .main-footer element. With the flexbox layout in place, these styles are no longer necessary for positioning the footer.

Why did you make the changes (we will use this info to test)?

• Fix Footer overlapping the content div.

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

Visuals before changes are applied

Visuals after changes are applied

[github-actions[bot]]

Want to review this pull request? Take a look at this documentation for a step by step guide!

From your project repository, check out a new branch and test the changes.

git checkout -b moaz-dev1-fix-footer-overlapping-6637 feature-homepage-launch
git pull https://github.com/moaz-dev1/website.git fix-footer-overlapping-6637

---

Note that CONTRIBUTING.md cannot previewed locally; rather it should be previewed at this URL:

https://github.com/moaz-dev1/website/blob/fix-footer-overlapping-6637/CONTRIBUTING.md  

[Anahisv23]

Availability: Weekdays Review ETA: 5/8/24 EOD

[jphamtv]

Hi @moazDev1,

Can you leave a comment explaining your solution as instructed in the action item shown in the screenshot? This will help provide clarity and context for your implementation. Thank you!

[moazDev1]

Hi @jphamtv,

thanks for clarification, I just did it now

[jphamtv]

Hey @moazDev1, I need to unassign myself from reviewing for now because I can't get to this right away and want to allow others to review in the meantime. This will hopefully allow your PR to be approved sooner.

Please keep in mind that reviewers might not always be immediately available to review pull requests due to other commitments or priorities. So for future PRs, please don't assign reviewers unless requested or when re-requesting a review from someone who has already reviewed your PR. This approach allows for more flexibility in the review process and ensures that your PR can be reviewed as quickly as possible.

Thank you for your understanding!

[moazDev1]

Hey @jphamtv, I wasn't aware that you unassigned yourself from reviewers, sorry for the inconvenience.

[Jperparas]

ETA: 5/15 Availability: 5/15