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.

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