[Bug] Tech Stack Breaks on wide Screen

[youngcoder45]

The Tech Stack section of the website layout breaks when viewed on ultra-wide screens such as 3400×1440 resolution.

Expected Behavior

The tech stack components should remain properly aligned and responsive across all screen sizes, including ultra-wide monitors.

Current Behavior

On very wide displays:

• The layout stretches incorrectly.
• Elements become misaligned or spaced improperly.
• Some components may overflow or leave excessive empty space.

Steps to Reproduce

1. Open the website on a display with resolution 3400×1440 (or simulate it using browser developer tools).
2. Navigate to the Tech Stack section.
3. Observe the layout breaking or misalignment.

Possible Cause

This might be caused by:

• Missing max-width constraints
• Improper flex/grid behavior
• Lack of responsive breakpoints for ultra-wide screens

Suggested Fix

• Add a max-width container for the section.
• Improve responsive behavior for large breakpoints (e.g., "2xl", "3xl").
• Test layout scaling on ultra-wide displays.

Environment

• Resolution: 3400×1440
• Browser: Any modern browser
• Device: Ultra-wide monitor

[codebyrashel]

This marquee breaks on ultra-wide screens because the illusion of infinite (its not infinite scroll, it just rotate repeatedly sideways) scrolling falls apart when the content isn’t wide enough. On smaller screens, the limited width hides gaps and reset points, but on something like 3400px, users can literally see where the animation ends or loops awkwardly. This usually happens when there aren’t enough items, the content isn’t duplicated for seamless looping, or the layout stretches without a max-width constraint. The fix is to make the scrolling track wider than the viewport by duplicating the content, adding more items if needed, and optionally constraining the section with a max-width.