ER: SDG image grid does not render correctly in Firefox browser

[roslynwythe]

Emergent Requirement - Problem

Some of the SDG images that appear on the sustainability section of the About Us page do not render in Firefox. From inspecting the element using dev tools it is appears that the appropriate <img> tags are present and reference images correctly. There appears to be a problem with the grid layout CSS properties.

About Us page - Sustainability section in Firefox

About Us page - Sustainability section in Chrome

Issue you discovered this emergent requirement in

• SDG 16: Rename and replace image with correct color one #4495

Date discovered

4/20/2023

Did you have to do something temporarily

• YES
• NO

Who was involved

@cng008
@blulady
@roslynwythe

What happens if this is not addressed

The grid of SDG images in the sustainability section of the About Us page appears broken and unprofessional in Firefox.

Resources

Recommended Action Items

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

Potential solutions [draft]

[github-actions]

Hi @roslynwythe.

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 the adding proper labels 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

[roslynwythe]

• Created New Issue Fix SDG image grid on About Us page to render in Firefox #4574