Fix Web App Responsiveness Issues

My web application looks fine in some situations but falls apart in others. I want every screen, from wide-screen desktop monitors down to small mobile handsets, to present a consistent, polished interface.

Scope of work
• Audit the current CSS and layout logic, then pinpoint why buttons, forms, images, grids, text, and headers misbehave on large (> 1024 px) and small (≤ 767 px) view-ports.
• Refactor or replace the troublesome code—Flexbox, CSS Grid, media queries, or any modern approach that keeps the markup clean is welcome.
• Verify fixes in Google Chrome and Mozilla Firefox; other browsers can be spot-checked only if changes are likely to affect them.
• Hand back production-ready code with comments so I can merge it straight into the existing repository.

Acceptance criteria
1. No element overlaps, clips, or jumps on the two target breakpoints when the window is resized.
2. Buttons and forms keep their intended alignment and padding.
3. Images and grids scale proportionally without distorting surrounding content.
4. Text and headers re-flow neatly, maintaining hierarchy and readability.
5. All of the above confirmed in the latest Chrome and Firefox developer tools responsive modes.

Please keep the edits focused, concise, and well-documented so I can understand exactly what changed and why.