Refactor CSS for Home Page Footer on Smaller Screens for Redesigned Homepage

[Zak234]

Overview

Currently, when you compress the Home page on a computer screen, the CSS for mobile doesn't activate leading to weird formatting. We need to update the CSS so that the mobile CSS is activated for the compressed Home Page to ensure the intended formatting.

Action Items

• [ ] Feature Branch: You will be working off a feature branch called feature-homepage-launch. Please follow "Step 1: Create your branch" in How to work off of a feature branch wiki article.
• [ ] Review _footer.scss and _footer.html to understand how CSS is applied to the footer
• [ ] Change the CSS so that the footer displays like the mobile version on compressed screens
• [ ] Confirm everything is working as intended
• [ ] To update your topic branch, please follow "Step 2: Update your branch with upstream changes" in How to work off of a feature branch wiki article.
• [ ] The pull request created from this issue should be merged into feature-homepage-launch. Please follow "Step 3: Create a pull request" in How to work off of a feature branch wiki article

Resources/Instructions

Current Home Page: Intended Home Page:

Files: _footer.scss _footer.html How to work off of a feature branch Homepage Redesign Credits in Figma

[JessicaLucindaCheng]

@Zak234 Thanks for writing this issue! There were a couple things I noticed:

1. The footer on the feature-homepage-launch branch looks like this

   Click here to see what the footer looks like on the redesigned homepage

   
   This is from changes implemented from part of this pull request #3183. **Note:** Some of the links do not work because the anchors have not been implemented yet for some of the menu items.

2. I noticed your links to the _footer.scss and _footer.html are for the code in the gh-pages branch. If the developer is going to be working off the feature-homepage-launch branch for this issue, I recommend you link to the code in the feature-homepage-launch because the code for these files in feature-homepage-launch branch are different from the files in gh-pages.

[ExperimentsInHonesty]

@Zak234 Jessica sent you a message about this issue, bumping this back into your inbox

[kathrynsilvaconway]

@Zak234 Hi, Sakari. Is this issue ready to be approved, or are you still working on it? Please let me know if you need any help this so I can get it approved and in the queue.

[ExperimentsInHonesty]

Sakari seems to have left the project. Please review his issue and Jessica's comments and prepare the issue for milestone

[blulady]

Great eye as always @JessicaLucindaCheng!! I believe I have made the corrections she recommended. Linking to the eature-homepage-launch _footer.scss and _footer.html as well as replacing the image. Did I replace it with the right image from figma? This was the image under option 2 in the red square? I didn't see anything labeled feature-homepage-launch....

[JessicaLucindaCheng]

@blulady Thanks for making the changes! Remember to remove the Draft label off of an issue when you add a Ready for Milestone label on it. I went ahead and did it this time.

I replaced the image of the current redesigned homepage footer with a gif to illustrate the problem better and because the original image was out of date.

[blulady]

@JessicaLucindaCheng Thank you!! We need all the help we can get.

[github-actions[bot]]

Hi @PeterSYoo, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:- i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?) ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[PeterSYoo]

i. Availability: 4pm-5pm PST 11/01/22 ii. ETA: 11/03/22

[bishrfaisal]

Please provide update

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 or links* (if necessary): "Add any pictures or links that will help illustrate what you are working on."

• remember to add links to the top of the issue if they are going to be needed again.

P.S. Please remember to always move your issue to the "In Progress" column when you self-assign. We have moved this issue for you.

[PeterSYoo]

Blockers: I'll be joining a hackathon from Nov 16 - Nov 21, but I'll be available again from Nov 21st!

[github-actions[bot]]

@PeterSYoo

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 (optional): "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 21, 2022 at 11:17 PM PST.}

[github-actions[bot]]

Hi @h3nry-m, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:- i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?) ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[h3nry-m]

Hi all! i. Availability: During the work week evenings ii. ETA: Just sent a pull request. Please review and let me know if I understood the objective correctly.

[Jaretzbalba]

Review availability: Weekdays 10-12pm ETA: 12/26 5pm

[github-actions[bot]]

Hi @Jaretzbalba, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:- i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?) ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[JessicaLucindaCheng]

• Merged pull request #3774 fixes this issue