Bug-fix/content-overflow-issue #7051

[harshildev25]

Description
Fixed content overflow issue where quote text, names, and positions were displaying vertically (letter-by-letter) on mobile and tablet devices, causing horizontal scrolling.

Related Issue
Closes #7051

Changes Made

• Added overflow-x: hidden to parent wrapper to prevent horizontal overflow
• Changed flex properties on quote text (h4) from flex: 0 0 65% to flex: 1 1 60% to allow proper shrinking
• Added min-width: 200px to .quote-source to prevent text from displaying vertically
• Added proper word wrapping properties (word-wrap, overflow-wrap, hyphens) to all text elements
• Changed image sizing from vw units to fixed pixel sizes with proper responsive breakpoints
• Added gap property to flexbox container for consistent spacing
• Improved responsive behavior for tablet (768px) and mobile (500px) breakpoints
• Added white-space: normal to ensure text wraps horizontally

Testing
Tested on multiple screen resolutions:

• ✅ Mobile (375px, 414px) - No overflow
• ✅ Tablet (768px) - No overflow
• ✅ Desktop (1920px) - Layout intact
• ✅ All quote variations display correctly (with/without images, long names/titles)

Screenshots

Before

After

20.10.2025_15.13.50_REC.mp4

[Rajesh-Nagarajan-11]

There is lots of unwanted css added please try to solve it by minimal and optimal way.

[sudhanshutech]

There is lots of unwanted css added please try to solve it by minimal and optimal way.

totally agree.

[harshildev25]

There is lots of unwanted css added please try to solve it by minimal and optimal way.

Thank you for your feedback!
I've refactored and optimized the component, removing all unnecessary CSS and keeping only the essential styles for minimal, responsive, and maintainable behavior.
The updated version now uses a single breakpoint, simpler flexbox properties, and only the key overflow and word-wrapping fixes required for consistent rendering on all devices.

[harshildev25]

There is lots of unwanted css added please try to solve it by minimal and optimal way.

totally agree.

I’ve updated the code to remove unnecessary CSS and kept only the minimal styles required for responsive behavior and bug fixes.

[l5io]

🚀 Preview for commit 859d20c at: https://68fb8074489c13679c5549c2--layer5.netlify.app

[Rajesh-Nagarajan-11]

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