Adjust large screen sponsor page images and chart

[daaimah123]

This PR addresses issue #352 whereby the sponsors page chart image and the pie chart are very large on larger screen sizes. The following section's images still need to be addressed:

• Techtonica Consulting
• How Hiring Works

[✅ Working] For the chart: To adjust the chart to have limited sizing of the image after 2880px by 1800px screen, we'll modify both the HTML and JavaScript parts; use CSS media queries to control the canvas size and update the Chart.js configuration to ensure proper scaling.

• removed the fixed width and height attributes from the canvas element in HTML.
• CSS media queries ensure that the canvas doesn't exceed 2880px wide and 1800px tall on screens larger than this size.
• set maintainAspectRatio to false in Chart.js options to allow independent scaling of width and height.
• function resizeChart() dynamically adjusts the canvas size based on the current window dimensions, capping at 2880x1800 pixels.
• call myChart.resize() after setting new dimensions to update the chart display.

[✅ Working] For the images: accomplished the change by limiting a width: 100% CSS rule from growing after 2880px

• keep the base .full-width-img class with width: 100% and max-width: 2880px. This ensures the image takes full width on smaller screens and doesn't exceed 2880px on larger ones.
• add a new media query that targets screens wider than 2880px (min-width: 2881px).
• explicitly set the width to 2880px for screens larger than 2880px wide.
• keep height: auto to maintain the aspect ratio of the image.

Before

After

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
techtonica-org	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 31, 2024 0:02am

[daaimah123]

⏸️ Making a note for revisting, the current work to date, does not address the image resizing for the following sections on the page, that also have a .full-width-img class:

• Techtonica Consulting
• How Hiring Works

[MaggieFero]

⏸️ Making a note for revisting, the current work to date, does not address the image resizing for the following sections on the page, that also have a .full-width-img class:

• Techtonica Consulting
• How Hiring Works

For Hiring, we should still do it here. Do you want to just skip the consulting section for now, though, since we're in the process of redoing that content? Could make more sense to put it out of scope for this and just address those images on the new page.