Skip to content

Fix testimonial slider clipping and card width inconsistency - #640

Open
the11dev wants to merge 1 commit into
containers:mainfrom
the11dev:fix-testimonial-slider-clipping
Open

Fix testimonial slider clipping and card width inconsistency#640
the11dev wants to merge 1 commit into
containers:mainfrom
the11dev:fix-testimonial-slider-clipping

Conversation

@the11dev

@the11dev the11dev commented Aug 5, 2026

Copy link
Copy Markdown

Fixes #573, #632

Problem
The testimonial section has two issues affecting the homepage:

  • first card gets clipped at 90–100% zoom and on narrower viewports
  • cards resize based on content length, creating inconsistent widths

Before:

Recording.2026-08-05.192104.mp4

After:

Untitled.design.1.mp4

Root Cause
The slider container uses justify-center with overflow-x-scroll, which pushes content past the scroll origin i.e the browser can't scroll back to the first card. Additionally, cards lack fixed widths so they size based on how much text they contain.

Changes
TestimonialSection/index.tsx:

  • Removed justify-center from the scroll container (root cause of the clipping)
  • Added an inner inline-flex mx-auto wrapper so cards still center when they all fit on screen, but don't clip when they overflow

Testimonial/index.tsx:

  • Added fixed widths (w-[300px] / sm:w-[340px]) for consistent card sizing

removed justify-center from the scroll container (caused first card
to be half-hidden at 90-100% zoom) and added fixed widths to cards.

Fixes: containers#632
Signed-off-by: Vaishanvi Mishra <vaishnavim1105@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

UI: Flex Items in the testimonial section not justified at the start position

1 participant