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
- Open the site at codepvg.onrender.com
- Open DevTools → Toggle device toolbar (or use a physical mobile device)
- Set viewport to ~375px–414px width
- 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
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
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
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:
Actual Behavior
All footer sections render sequentially in a single column, ignoring any parallel/grid layout.
Screenshot
Environment
Labels
type:bug·Frontend·good first issue·level:beginner