Fix Image Aspect Ratio & Font Scaling on Mobile (kanvas/design)

[M-DEV-1]

Description

In mobile view, the image on the kanvas/design page does not maintain proper aspect ratio, and the associated text font is too large.

Expected Behavior

Screenshots

Environment:

• Host OS:
• Browser:

---

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.

[Tharanishwaran]

can i work on this issue ?

[M-DEV-1]

Hi @Tharanishwaran, I'm sorry but there are some other improvements to do as well in this PR on the content for these cards. I really appreciate your willingness to help!!

[M-DEV-1]

@Tharanishwaran, would you like to work on this issue?. If yes, please comment under it, and I will assign it to you.

[Tharanishwaran]

@M-DEV-1,Yes, I would like to work on this issue. Thank you!

[KrishnaShuk]

Hey @M-DEV-1 what's the progress here? Can i help?

[M-DEV-1]

@KrishnaShuk, absolutely, you can help. Here, we are to fix the aspect ratio and font scaling for these cards on this page

The cards are fine on Desktop View, but it can use some love for Mobile View. Also, the content for these cards can be improved.

[M-DEV-1]

Would you like to give it a try?

[KrishnaShuk]

Yes please. Assign me.

[KrishnaShuk]

Hey @M-DEV-1, should the image be enlarged in the cards? Exactly what we have to attain here?

[M-DEV-1]

@KrishnaShuk when you go to the page on mobile, we'd like to be able to see both clearly, the text and the image.

Right now, the text is clearly visible and large but the image/gif is smaller, and not very clear. We don't want to break the cards, but we'd like to adjust it.

that's mostly it.

[M-DEV-1]

Go through all the cards once, you'll get the idea.

[KrishnaShuk]

So we have to resize the image/gif to make it clearly visible.

[HIMU-2001]

Hi @KrishnaShuk @M-DEV-1 ,

Could I contribute to this?

[krVatsal]

@M-DEV-1, Hi is the issue still up? Can i help with it?

[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.

[Lakshay-Pareek]

@M-DEV-1 Is this issue open? If yes, then i would like to contribute in this.

[vr-varad]

Thanks @Lakshay-Pareek Here you go!!

[Lakshay-Pareek]

@vr-varad Can you explain a bit what exactly i have to do. Reading the above conversation i guess i have to adjust this gif?

[Lakshay-Pareek]

@vr-varad So what i have to do is make the tutorial window big, is that it?

[vr-varad]

ya @Lakshay-Pareek compatible with the text in mobile view.

[Lakshay-Pareek]

@vr-varad How's this??

[vr-varad]

Make a pr @Lakshay-Pareek. That would be nice and easy to review.

[Rajesh-Nagarajan-11]

@vr-varad I believe the issue has already been resolved. Everything looks good to me. Please check it on mobile view and close it accordingly.