Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

[About] "Who Are We?" section overlaps and overflows on mobile and tablet widths

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

Maintainers usually reply within 2 days

@Nimit3418 is already working on this.

Since Oct 8, 2026.

Assessment

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

Research direction

Start with src/sections/Company/WhoWeAre/whoweare.style.js, where the issue identifies a stray brace, a partial declaration, and missing centering for .second-row. Check the page at 390px, 768px, and desktop widths, then verify the cards stay within the viewport and the second row is centered like the third.

Written by the indexing model from the issue text.

Description

framework/gatsby help wanted kind/bug
Description

On https://layer5.io/company/about, the "Who Are We?" section. At 390px and 768px the cards overlap each other and the content runs off the right edge of the screen.

The cause is a syntax error in src/sections/Company/WhoWeAre/whoweare.style.js:

  • A stray } on line 47 closes the styled.section block early, so every rule after it stops applying to the section. That includes the .columnWrap, .second-row, .third-row and .item styles and all the @media overrides (max-width 1600px, 991px, 480px) that reduce the section padding and reset the row margins on smaller screens.
  • A leftover pa on line 27 (a half-typed declaration inside the h3 rule).

Because the responsive overrides never apply, small screens keep the desktop values (padding: 4rem on the section, margin: 2rem 5rem on .row), which leaves almost no width for the cards.

Separately, .second-row has no justify-content: center while .third-row does, so the second row of three cards (Cloud Native Performance Maintainers, Kubernetes Authors and Trainers, Meshery Creators) sits left-aligned instead of centred like the row below it.

Steps to reproduce

  1. Open https://layer5.io/company/about
  2. Open DevTools and enable the device toolbar
  3. Set the viewport width to 390px (or 768px)
  4. Scroll to the "Who Are We?" section
Expected Behavior

The cards stack cleanly within the viewport at mobile and tablet widths, with no overlap and no horizontal overflow. At desktop width, the second row of cards is centred, matching the third row.

Screenshots
Image
Environment:
  • Host OS: Windows 11
  • Browser: Brave
Dominant language
JavaScript
Stars
1.1k
Forks
1.7k
Avg merge
3d 13h
Merged PRs (30d)
36

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.