Fix for desktop and Mobile: SVG Error for CNCF page

[Bhumikagarggg]

Description

This PR fixes #2507 by correcting broken asset paths and refining the related CSS to ensure images render correctly.
The updates are intentionally minimal and focus only on resolving the reported issues.

Notes for Reviewers

• Changes are minimal and scoped to the reported issue
• Verified on both desktop and mobile views
• CSS updates are isolated and do not impact other pages

Screenshot

Signed commits

• Yes, I signed my commits.

[netlify]

✅ Deploy Preview for mesheryio-preview ready!

Name	Link
🔨 Latest commit	0bce77e
🔍 Latest deploy log	https://app.netlify.com/projects/mesheryio-preview/deploys/6964fb34488bb40008c42693
😎 Deploy Preview	https://deploy-preview-2524--mesheryio-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[gemini-code-assist]

Summary of Changes

Hello @Bhumikagarggg, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request addresses and resolves an issue where SVG images on the CNCF page were not displaying correctly across different devices. The changes involve updating image source paths to ensure they load reliably and adjusting the associated CSS to improve the layout and responsiveness of these images, thereby enhancing the user experience and accessibility of the page.

Highlights

• SVG Image Path Correction: Corrected broken asset paths for SVG images on the CNCF page, changing them from relative to absolute paths to ensure proper loading and display.
• Improved Responsiveness: Refined CSS for various image elements (#cncf-large-img, #cncf-logo, #cncf-meshery-img) to ensure images render correctly and are responsive across both desktop and mobile views, including specific adjustments for smaller screens.
• Accessibility Enhancement: Added descriptive alt attributes to SVG image tags, improving accessibility for users who rely on screen readers and providing better context for search engines.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request successfully resolves the SVG rendering issue on the CNCF page by correcting image asset paths and refining the CSS for better responsiveness on desktop and mobile. The changes are effective and well-scoped. I've provided a few suggestions to enhance the maintainability and consistency of the new HTML and CSS code, such as using CSS for spacing instead of <br> tags, removing a redundant CSS property, and using consistent units for padding values.

[Bhumikagarggg]

hello @saurabhraghuvanshii
please review this PR.

[Bhumikagarggg]

@saurabhraghuvanshii Thanks for the review!
I’ve updated the media query to use max-width: 767px and remove br.
Please let me know if any further adjustments are needed.

[kishore08-07]

@Bhumikagarggg
Thank you for your contribution!
Let's discuss this during the website call tomorrow at 6:30 PM IST | 7 AM CT
Add it as an agenda item to the meeting minutes, if you would :)

[Rajesh-Nagarajan-11]

These images are outdated. For example, Meshery is shown with 343 stars and 69 contributors, which is no longer accurate. Please use updated images with the latest stats.
// @Bhumikagarggg