Fix logo/graphic fitting within its container on mobile viewports

Aperta Adatta ai principianti
  • Qualcosa non va?
#8,272 4 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 2 giorni

@AP24110011695 ci sta già lavorando.

Dal 31/10/2026.

  • #8277 di @AP24110011695 — aperta

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
72/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
css, javascript
Ambito
frontend

Direzione di ricerca

Cerca nel repo il HPE case study section component (probabilmente un file Gatsby/React sotto src/). Ispeziona il suo CSS per il logo container e aggiungi responsive scaling rules per larghezze come 360px e 546px. Done significa che il logo si adatta proporzionalmente, centrato, senza overflow in responsive mode.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

framework/gatsby good first issue help wanted kind/bug
Description

The logo/graphic in the HPE case study section does not appear to scale and fit correctly within its container on smaller mobile viewports.

When testing the page using responsive mode, the layout appears inconsistent across different mobile screen widths.

Page: https://layer5.io

Steps to Reproduce
  1. Visit the HPE case study page.
  2. Open browser developer tools and enable responsive design mode.
  3. Test the layout at different mobile viewport widths (e.g., 546px and 360px).
  4. Observe how the logo/graphic is rendered inside its container.
Expected Behavior
  • The logo/graphic should scale proportionally to fit within its parent container.
  • It should remain properly centered and maintain its aspect ratio.
  • No clipping, overflow, or unwanted spacing should occur at smaller viewport widths.
Actual Behavior

The logo/graphic does not scale consistently across mobile viewport widths. Its sizing and alignment within the container appear inconsistent, resulting in a layout that does not adapt cleanly to smaller screens.

Environment
  • Browser: Firefox
  • Testing mode: Responsive Design Mode
  • Viewports: 546px and 360px
  • Device emulation: Android
Screenshots

Screenshots demonstrating the behavior at different viewport widths are attached.

Anyone can work on this issue
Image Image
Lingua principale
JavaScript
Stelle
1.1k
Fork
1.7k
Merge medio
2g 17h
PR unite (30g)
17

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di layer5io/layer5

Tutte le issue di layer5io/layer5

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.