Fix: Added max-width to learning path images

[Jivi-this-side]

Description

This PR fixes #6411

The issue was that images in the learning paths were taking up the full width of their container, causing them to appear excessively large and unscalable. This PR adds the max-width: 100%; and object-fit: contain; CSS properties to ensure that images are properly constrained and maintain their aspect ratios while scaling proportionally.

Notes for Reviewers

• Tested the changes locally to ensure that the images now scale appropriately and are responsive across different screen sizes.
• The fix is applied to the .card-image img styles in the learn-card.style.js file.
• https://github.com/layer5io/layer5/blob/711ee7a918088ec95d53d6ff90812564c377d210/src/components/Learn-Components/Card-Component/learn-card.style.js#L85-L88

Signed commits

• [x] Yes, I signed my commits.

Thankyou ! 🌻

[l5io]

🚀 Preview for commit 89464cefa9933b8a7f1b9740a438a2cf12a5543f at: https://6810d3e50ee12c7354263f8d--layer5.netlify.app

[vr-varad]

@Jivi-this-side the issue was to add max-width but not 100%, the image are still humongous and issue was to have a maxwidth to keep them smaller even if the screen size increases. The approach is right just make max-width smaller.

[Jivi-this-side]

@vr-varad Sir, if I set max-width: 600px, would the following CSS:

img{ 
            height: 8.5rem; 
            width: 8.5rem; 
        }  

If i set the max-width: 600px property will not apply because the width is explicitly defined as 8.5rem. This CSS won't behave as intended since the explicitly defined height and width (both set to 8.5rem) override the max-width: 600px, rendering it ineffective. Could you provide further guidance on this?

[vr-varad]

You're getting the issue because width: 8.5rem; is forcing the image to always be 8.5rem wide. So even though you wrote max-width: 100%, it doesn’t work — the image won't shrink to fit its container, since the fixed width wins. @Jivi-this-side

[Jivi-this-side]

@vr-varad sir ! Apologies for the interruption, but I believe that adding the following inline style: style="max-width: 500px; height: auto; width: 100%;" at this location in the file : https://github.com/layer5io/layer5/blob/711ee7a918088ec95d53d6ff90812564c377d210/content-learn/mastering-meshery/introduction-to-meshery/meshery/reviewing-designs.mdx?plain=1#L58

would effectively constrain the images, causing them to shrink as desired. This approach ensures that the images remain responsive, scaling appropriately within the container while maintaining their aspect ratio. Should I revert my previous max-width changes and commit this updated change instead? Locally, this styling is producing the intended appearance :

Am I correct in this approach?

[vr-varad]

This looks promising, make a commit @Jivi-this-side will review it and suggest changes if required

[Jivi-this-side]

@vr-varad Sir, I have resubmitted the changes as per our discussion above. Kindly review them and let me know if they are satisfactory or if any further modifications are needed. Thank you 🌻

[l5io]

🚀 Preview for commit 0ed1075995a15596fc0bb9a4f67b072349ebf200 at: https://68131804a673446375d22982--layer5.netlify.app

[vr-varad]

I don't think that worked coz the size of the image if still humongous @Jivi-this-side

[l5io]

🚀 Preview for commit e5f5485cfd498d12490b30247b67bea85bd52ddf at: https://68135586d20cdb7482e828cc--layer5.netlify.app

[Jivi-this-side]

@vr-varad Sir, I sincerely apologize for my earlier oversight. I mistakenly applied the changes to the wrong file, "Reviewing-Designs.mdx." However, I have now corrected this and updated the appropriate file, "Deploying-Meshery.mdx."

I deeply regret any confusion caused and kindly request your review of my latest commit. I am confident that the changes are now implemented correctly and will function as intended.

Additionally, I noticed that two images remain unchanged as they already have an inline style specifying a margin-bottom property. Would you recommend removing this inline style, or should I apply a consistent margin-bottom styling to all images for a more uniform appearance?

Thank you for your patience and understanding. I greatly appreciate your guidance! 🙇🏻‍♀️

[l5io]

🚀 Preview for commit ac203c4a4b6f63ec47f518bb7d22dc58a5e27466 at: https://6814b18c79547acc414223c9--layer5.netlify.app

[vishalvivekm]

@Jivi-this-side Thank you for your contribution! Let's discuss this during the website call today at 5:30 PM IST

Add it as an agenda item to the meeting minutes, if you would :)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Namanv0509]

https://github.com/layer5io/layer5/pull/6645

[l5io]

🚀 Preview for commit 12406a13ee76f407952589dc39aa2d91d30a7367 at: https://68cfc9b9404337bdfb759d32--layer5.netlify.app

[l5io]

🚀 Preview for commit d599ccc16e20a02c2309209647388489fce4c371 at: https://68e6eddfd72446791be975c1--layer5.netlify.app

[Namanv0509]

Closing this PR as duplicate