Fix text alignment on the Join Us page and the About page headers

[ramitaarora]

Overview

We need to fix the alignment of the second paragraph in both the Join Us page and the About page headers. They are currently aligned in the center, but should be left-aligned. The text alignment for the header paragraphs will not be uniform on the Join Us and About Us pages (and possibly other pages if the paragraph text is changed).

Click here to see the desired paragraphs' text alignment at 1440px screen width

Join Us page

About Us page

Action Items

• [x] Open the file _sass/elements/_containers.scss in IDE
• [x] Fix the paragraphs' text alignment on the Join Us and About Us page. This requires fixing the SCSS.
• [x] Using docker, verify the elements on the About page and Join Us page. For all the pages on the site that have paragraph(s) in the header section of the page, the paragraph(s) on all the headers should be left justified. So, check this for each page.
• [x] Check the website looks good in mobile, tablet, and desktop views and nothing is broken by the changes you made.
• [x] Create a PR when finished.

Resources/Instructions

• pages/about.html
• https://github.com/hackforla/website/blob/gh-pages/pages/about.html
• pages/join-us.html
• https://github.com/hackforla/website/blob/gh-pages/pages/join-us.html
• https://www.hackforla.org/join
• https://www.hackforla.org/about/
• https://github.com/hackforla/website/blob/gh-pages/_sass/elements/_containers.scss

Mentioned in #5973.

[HackforLABot]

Hi @pluto-bell, HfLA appreciates your interest in this issue, but please note that it is in the "New Issue Approval" column of the Project Board because it has not been finalized, approved, or prioritized, and so it is not ready for assignment. For this reason, you have been unassigned from this issue. Please remember to assign issues only from the "Prioritized Backlog" column.

The only exceptions to this rule are if you are writing an issue and the Draft label is applied, or if you are self-assigning to your "Pre-work Checklist" (the issue includes the Complexity: Prework label).

[HackforLABot]

Hi @vorleakyek, 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 :)

[vorleakyek]

i. Availability: Mon, Tue-Friday evening ii. ETA: 1-2 hrs

[vorleakyek]

@ramitaarora, when the screen size is around 950px, we just want to align the second paragraph with the first paragraph, correct? So, the blue line padding there should not be changed? Please confirm this so that I can try to look for a better solution. Thanks!

[ramitaarora]

@vorleakyek I believe you are correct! @JessicaLucindaCheng, I just want to check if that is correct and if there is a figma file we can reference?

[vorleakyek]

Provide Update:

1. Progress: I made the changes based on the comment from the reviewer.
2. Blockers: Just waiting for the PR review.
3. Availability: M-F evening
4. ETA: based on the comment from the review