Fix logo/graphic fitting within its container on mobile viewports

Open Beginner friendly
  • Is something wrong?
#8,272 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.

  • #8277 by @AP24110011695 — open

Assessment

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

Research direction

Search the repo for the HPE case study section component (likely a Gatsby/React file under src/). Inspect its CSS for the logo container and add responsive scaling rules for widths like 360px and 546px. Done means the logo fits proportionally, centered, with no overflow in responsive mode.

Written by the indexing model from the issue text.

Description

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
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.