Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Fix responsive behavior of SoSpecial carousel items across screen sizes #7307

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Katotodan wants to merge 1 commit into layer5io:master
base: master
Choose a base branch
Loading
from Katotodan:feature/fix-slider-on-mobile

Conversation

@Katotodan
Copy link
Contributor

@Katotodan Katotodan commented Dec 29, 2025

Description
This PR fixes a rendering issue in the SoSpecial carousel where slider items were shrinking on small devices.
The root cause was related to Gatsby’s SSR behavior: the slider was initially rendered on the server without access to viewport-dependent values used in the slider settings (inside settings > responsive array), causing react-slick to compute incorrect dimensions.
To fix this, SSR rendering was kind of disabled for this specific component, and the slider settings are now adjusted programmatically on the client based on the current screen size. This ensures consistent and stable rendering across all breakpoints.

This PR fixes #7305

Here is the picture before
PHOTO-2025年12月29日-01-42-42

After
Screenshot 2025年12月29日 at 21 09 08

Notes for Reviewers

Signed commits

  • [x ] Yes, I signed my commits.

Signed-off-by: DANIEL KATOTO <katotodan@gmail.com>
Copy link
Contributor

l5io commented Dec 29, 2025

Copy link
Contributor

@kishore08-07 kishore08-07 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Katotodan

Text is overlapping, Adjust the card width and layout for smaller screens to ensure proper content spacing.

1000241179

Copy link
Contributor

@kishore08-07 kishore08-07 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Katotodan
Use the Related Resources section on https://layer5.io/solutions/platform-engineering as the reference for the expected behavior.
1000241180

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@kishore08-07 kishore08-07 kishore08-07 left review comments

Reviewers whose approvals may not affect merge requirements

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Fixing slider on small devices

AltStyle によって変換されたページ (->オリジナル) /