ER: Text Overflows in Sustainable Development Component

[ldaws003]

Emergent Requirement - Problem

The text overflows in the Sustainable Development component in mobile widths. These issues was noticed in the program area pages such as https://www.hackforla.org/program-areas/citizen-engagement. Also, the text forms a thin column to the side when the mobile width is wide enough.

How to replicate

1. Go to https://www.hackforla.org/program-areas/citizen-engagement
2. Right click, Inspect
3. Click Mobile
4. Open one of the sections
5. See SDG icon is too large
6. Text is off the page

Mobile

Desktop

Issue you discovered this emergent requirement in

• Create each program area page automatically using a layout #3328

Date discovered

12/6/25

Did you have to do something temporarily

• YES
• NO

Who was involved

@myronchen-git
@ldaws003

What happens if this is not addressed

The website would look unprofessional on mobile view.

Resources

Recommended Action Items

• Make a new issue
• Discuss with team
• Let a Team Lead know

Potential solutions [draft]

• Review front end design on figma to better understand how things should look
• add css for the Sustainable Development Goal element in _includes/program-area-pages-cards.html
  • make the image take up a block on mobile
  • have the text appear below the image on mobile
  • prevent text overflow and allow wrap on mobile

[github-actions]

Hi @ldaws003.

Please don't forget to add the proper labels to this issue. Currently, the labels for the following are missing:

• Complexity, Role, Feature

NOTE: Please ignore this comment if you do not have 'write' access to this directory.

To add a label, take a look at Github's documentation here.

Also, don't forget to remove the "missing labels" afterwards.
To remove a label, the process is similar to adding a label, but you select a currently added label to remove it.

After the proper labels are added, the merge team will review the issue and add a "Ready for Prioritization" label once it is ready for prioritization.

Additional Resources:

• Wiki: How to create issues
• Wiki: How to read and interpret labels