Fix inconsistent visibility and clipping of Slick carousel navigation arrows on mobile
I maintainer di solito rispondono entro 2 giorni
Valutazione
- Difficoltà
- 2/5
- Tempo stimato
- 1-3 ore
- Idoneità per principianti
- 70/100
- Tipo di issue
- Bug
- Chiarezza
- Abbastanza chiara
- Stato di attività
- Attiva
- Stack tecnologico
- css, javascript
- Ambito
- frontend
Direzione di ricerca
Individua il componente pagina della piattaforma DevRel nella codebase Gatsby e trova dove viene renderizzato il Slick carousel. Ispeziona il CSS che controlla la visibilità e il posizionamento delle frecce di navigazione ai breakpoint mobili (es. 360px). Verifica la correzione usando la modalità responsive del browser a 360×760px e 314×709px; fatto quando le frecce sono completamente visibili e non tagliate.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Descrizione
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
- Visit the DevRel platform page.
- Open browser developer tools and enable responsive design mode.
- Set the viewport to mobile dimensions (e.g., 360px and 314px).
- Locate the image carousel in the DevRel section.
- 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.
- Lingua principale
- JavaScript
- Stelle
- 1.1k
- Fork
- 1.7k
- Merge medio
- 2g 17h
- PR unite (30g)
- 17
Preparare l'ambiente
- Nessun Dockerfile né file Docker Compose
- Ha un modello di pull request
- Leggi la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Altre issue di layer5io/layer5
-
Fix logo/graphic fitting within its container on mobile viewportsForse già presa @AP24110011695 l’ha presa 4 giorni fa. Apertaframework/gatsby good first issue help wanted kind/bug
Difficoltà 2/5 1-3 ore Idoneità per principianti 72/100
layer5io/layer5#8272 · 4 commenti ·
I maintainer di solito rispondono entro 2 giorni
-
[UI] Typography token Heading 1 overflows on mobile viewportsForse già presa @AP24110011695 l’ha presa 4 giorni fa. Apertaframework/gatsby help wanted kind/bug
Difficoltà 2/5 1-3 ore Idoneità per principianti 70/100
layer5io/layer5#8267 · 1 commento ·
I maintainer di solito rispondono entro 2 giorni
-
[UI] Theme Provider Props table overflows on mobile viewportsForse già presa @SajanBisht l’ha presa 5 giorni fa. Apertaframework/gatsby help wanted kind/bug
Difficoltà 2/5 1-3 ore Idoneità per principianti 78/100
layer5io/layer5#8264 · 1 commento · 1 assegnatario ·
I maintainer di solito rispondono entro 2 giorni
-
[Pricing] Plan cards reference non-existent "Free" and "Team" tiersForse già presa @sameerkrdev l’ha presa 4 giorni fa. Apertaframework/gatsby help wanted kind/bug
Difficoltà 2/5 1-3 ore Idoneità per principianti 65/100
layer5io/layer5#8258 · 4 commenti · 1 assegnatario ·
I maintainer di solito rispondono entro 2 giorni
-
[UI] Technology logo SVGs are cropped, uneven, and distorted in Course Overview and Chapter viewsForse già presa @tejaswiverma121-byte l’ha presa 11 giorni fa. Apertaframework/gatsby help wanted kind/bug
Difficoltà 2/5 1-3 ore Idoneità per principianti 70/100
layer5io/layer5#8233 · 1 commento · 1 assegnatario ·
I maintainer di solito rispondono entro 2 giorni
Tutte le issue di layer5io/layer5
Issue simili
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 84/100
RocketChat/EmbeddedChat#1416 ·
I maintainer di solito rispondono entro 1 giorno
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 78/100
yetone/magpie#5265 · 1 commento ·
I maintainer di solito rispondono entro 1 giorno
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 68/100
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 68/100
I maintainer di solito rispondono entro 1 giorno
-
ai-driven-fuzzing bug Cosmetic
Difficoltà 2/5 1-3 ore Idoneità per principianti 82/100
linagora/cozy-client#1831 ·
I maintainer di solito rispondono entro 1 giorno