Fix SDG image grid on About Us page to render in Firefox

[roslynwythe]

Overview

As developers we need to modify the CSS styles applied to the SDG image grid in the Sustainability section of the About Us page, so that layout renders correctly in the Firefox browser.

Action Items

• Refer to the screenshots in the Resources section for a comparison of the appearance of the SDG image grid in the Firefox browser versus the appearance of the same elements in the Chrome browser. Note that some images do not render in the Firefox browser.
• Open the HTML for the SDG image grid layout at _includes/about-page/about-card-sustainability.html and the SCSS at _sass/components/_about.scss
• Resolve any ambiguous or incorrect styles in the CSS grid layout, so that the appearance of the SDG image grid in Firefox matches the appearance in Chrome.
• If it is not possible to create a consistent cross-browser appearance using the CSS grid layout mechanism, implement the same design using a different layout mechanism.

Resources/Instructions

MDN: CSS Grid Layout
Figma Design - About Us page
About Us page: live | GitHub
About Us Sustainability Card Include

• This issue was created as a result of ER: SDG image grid does not render correctly in Firefox browser #4572

[github-actions]

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

[EdASalazar]

Wed-Friday 10 am - 6 pm
4 hours a day.
Sat-Sunday Noon - 4 pm
ETA EOD Thursday

[EdASalazar]

I was able to get the Docker up and running and see where the issue is. Tomorrow, 4/4/23, I'll start working on the CSS. If I can't resolve the issue on my own I'll log into the office hours.

[EdASalazar]

I think I figured out the issue. Here is a similar issue. Essentially it has to do with how Chrome and Firefox render the "justify-item: stretch".

Chrome will give the images in the grid a default height but Firefox doesn't. I think this causes the images in Firefox to "Stretch" outside of the bounds of the container.

We could either remove the "justify-item: stretch" from CSS. This doesn't seem to affect the appearance of the page in Chrome and makes both Firefox and Chrome render the same. (At least as my eyes can tell.)

We can also add a height to the images. This seems the like the better solution. A height of 140px seems to work.

Going with defining the height for the images. Will discuss with a lead if removing "justify-item: stretch" is a better solution. I'm not completely sure if the "stretch" is necessary.