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.