🐛 Bug Report: Responsive Design Breaks on Appwrite Heroes Page for Mobile Devices.

[Nishantjain10]

👟 Reproduction steps

While visiting the appwrite.io/heroes page the responsiveness is breaking down on mobile screens due to marquee image carousel/scroll carousel animation, in the website page. You can see clearly see overflow, by vertically scrolling on mobile devices.

Steps to see the responsiveness bug:

• Open a mobile browser and navigate to the appwrite.io/heroes page.

• Notice the marquee image collage animation on the website.

• Vertically scroll on the mobile device to explore the content.

• You can see the point where the responsiveness breaks down or the overflow issue occurs.

👍 Expected behavior

• The appwrite.io/heroes page should be responsive on mobile screens.
• The scroll carousel animation should not cause overflow issues, and the content should be comfortably viewable on mobile devices.

👎 Actual Behavior

I think, from what I've seen, I think this happened due to max-content width within the global class of scroll carousel.

🎲 Appwrite version

Appwrite Cloud

💻 Operating system

Windows

🧱 Your Environment

No response

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

🛠️ Note: I am interested in working on this issue and would like to contribute a fix.

[amrahs02]

I want to work on this issue.

[amrahs02]

I think this only happens in Chrome Browser. it looks fine on Firefox and Edge.

[DH-555]

Looks like this is fixed by this?
1fce8f9

[Nishantjain10]

Looks like this is fixed by this? 1fce8f9

Yes, you're right, @stnguyen90. I just wanted to let you know that I’ll be closing this issue now.
Here’s the replicated issue: #481. Thanks!