Fix inconsistent visibility and clipping of Slick carousel navigation arrows on mobile

Open Beginner friendly
  • Is something wrong?
#8,275 4 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

@AP24110011695 is already working on this.

Since Oct 31, 2026.

  • #8281 by @AP24110011695 — open

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
70/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
css, javascript
Domain
frontend

Research direction

Locate the DevRel platform page component in the Gatsby codebase and find where the Slick carousel is rendered. Inspect the CSS controlling the navigation arrows' visibility and positioning at mobile breakpoints (e.g., 360px). Verify the fix using browser responsive mode at 360×760px and 314×709px; done when arrows are fully visible and unclipped.

Written by the indexing model from the issue text.

Description

framework/gatsby help wanted kind/bug
Description

The Slick carousel navigation arrows on the DevRel platform page behave inconsistently on smaller mobile viewports.

During responsive testing, the previous and next navigation arrows are sometimes not visible. When they do appear, they are partially clipped at the edges of the carousel, affecting their visibility and usability.

Page: https://layer5.io/solutions/devrel-platform-for-kubernetes-and-cloud-native-content

Steps to Reproduce
  1. Visit the DevRel platform page.
  2. Open browser developer tools and enable responsive design mode.
  3. Set the viewport to mobile dimensions (e.g., 360px and 314px).
  4. Locate the image carousel in the DevRel section.
  5. Observe the previous and next navigation arrows while interacting with the carousel.
Expected Behavior
  • Both previous and next navigation arrows should display consistently on mobile viewports.
  • The arrows should be fully visible and properly positioned within the carousel boundaries.
  • Navigation controls should remain accessible and usable across different screen widths.
  • Their positioning should adapt appropriately to smaller viewport sizes.
Actual Behavior
  • Navigation arrows are inconsistently displayed and sometimes disappear.
  • When visible, the arrows are partially clipped at the carousel boundaries.
  • Their positioning does not appear to adapt consistently to smaller mobile viewports.
Environment
  • Browser: Firefox
  • Testing mode: Responsive Design Mode
  • Viewports: 360 × 760px and 314 × 709px
  • Device emulation: Samsung Galaxy S10
Screenshots

Screenshots demonstrating the inconsistent visibility and clipping of carousel navigation arrows are attached.

Image Image Image
Dominant language
JavaScript
Stars
1.2k
Forks
1.7k
Avg merge
2d 22h
Merged PRs (30d)
69

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from layer5io/layer5

All issues in layer5io/layer5

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.