Skip to content

[BUG] Footer renders in sequential layout instead of parallel columns on mobile #248

Description

@ESHAYAY

Description

On mobile viewports, the footer sections stack one after another in a single sequential column
instead of rendering side-by-side in a proper parallel/grid layout. This breaks the intended
multi-column footer structure and makes it look unfinished on small screens.

Steps to Reproduce

  1. Open the site at codepvg.onrender.com
  2. Open DevTools → Toggle device toolbar (or use a physical mobile device)
  3. Set viewport to ~375px–414px width
  4. Scroll to the footer — sections stack vertically in a single column

Expected Behavior

Footer sections should display in a responsive grid layout — side-by-side on wider mobile
viewports and stacking gracefully only on the narrowest screens. Something like:

@media (max-width: 768px) {
  .footer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

Actual Behavior

All footer sections render sequentially in a single column, ignoring any parallel/grid layout.

Screenshot

Image

Environment

  • Device: Mobile / DevTools emulation
  • Viewport: ~375px (iPhone SE), ~414px (iPhone Pro Max)
  • Browser: Chrome / Firefox

Labels

type:bug · Frontend · good first issue · level:beginner

Metadata

Metadata

Assignees

Labels

FrontendTask mainly involving frontendgood first issueGood for newcomerslevel:beginnerIndicates the difficultytype:bugSomething isn't working

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions