Fix the Responsiveness #742
Conversation
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
|
@amaan-bhati Sir, kindly review this PR at your convenience . |
There was a problem hiding this comment.
Pull request overview
This PR addresses mobile responsiveness issues by optimizing layout spacing, grid configurations, and typography for smaller viewports. The changes prevent horizontal scrolling and content overflow on mobile devices while maintaining a clean desktop experience.
Key Changes:
- Reduced container padding on mobile devices (px-8 → px-4, p-6 → p-4) to maximize usable screen space
- Converted horizontal scrolling grid to responsive vertical stack layout (grid-flow-col → grid-cols-1 on mobile)
- Adjusted grid column counts for better mobile display (3 columns → 2 columns on mobile for language and dependency grids)
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| src/pages/index.js | Reduces padding on Layout and main containers for mobile (px-4, p-4) with responsive breakpoints (md:px-8, md:p-10) |
| src/components/QuickStart.js | Reduces heading size on mobile (text-3xl) to prevent overflow while maintaining text-4xl on desktop |
| src/components/Product.js | Replaces horizontal scrolling grid with responsive vertical stack (grid-cols-1 on mobile, md:grid-cols-3 on desktop) |
| src/components/Intro.js | Adjusts Languages and Dependencies grids from 3 to 2 columns on mobile for better readability |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| </p> | ||
|
|
||
| <div className="grid gap-4 sm:grid-cols-3 xl:gap-6"> | ||
| <div className="mt-4"> |
There was a problem hiding this comment.
The grid styling has been completely removed from the parent container. This wrapper div should retain some structural classes even if not a grid itself. Consider keeping a meaningful class or removing the wrapper entirely if it's no longer needed, as an empty div with only "mt-4" serves little purpose.
AnujShrivastava01
force-pushed
the
main
branch
from
3d0079e to
f31342c
Compare
Signed-off-by: Anuj Shrivastava <[email protected]>
AnujShrivastava01
force-pushed
the
main
branch
from
f31342c to
a8533c5
Compare
Achanandhi-M
left a comment
Achanandhi-M
left a comment
There was a problem hiding this comment.
Hey @AnujShrivastava01, the changes look good overall. However, there are a few areas that need improvement—you can refer to the attached screenshots for details. Also, the logo doesn’t look quite right; you can see this in the section below.
Additionally, the PR currently updates only the landing page, but other pages are still not responsive. Please take a look at those as well.
|
@Achanandhi-M Thanks for the review! . I’ll go through the mentioned areas and address the issues accordingly, including fixing the logo alignment/appearance. |
|
@Achanandhi-M 🔹Product Section Layout UpdateBefore
After
🔹 Footer Responsiveness
|
Achanandhi-M
left a comment
Achanandhi-M
left a comment
There was a problem hiding this comment.
Hey @AnujShrivastava01, the changes look good. However, please don’t modify the existing styles—I’ve attached them for reference. Kindly follow the current styling and also fix the failing pipelines. Thanks!
AnujShrivastava01
force-pushed
the
main
branch
from
53530fb to
121fcf3
Compare
…t for footer sections without modifying existing styles Signed-off-by: Anuj Shrivastava <[email protected]>
|
@Achanandhi-M
|
|
I’ve updated the docusaurus.config file to improve the footer’s structural layout while keeping the existing styling and content unchanged. The changes primarily introduce clearer wrapper sections to better organize the footer elements, which helps maintain consistent responsiveness across different screen sizes and frame widths. No links, icons, or functional behavior were altered—only the layout structure was refined to ensure better maintainability and stability on all devices. |
Achanandhi-M
left a comment
Achanandhi-M
left a comment
There was a problem hiding this comment.
Hey @AnujShrivastava01, could you please address the GitHub Copilot comments? Also, as mentioned in the previous review, the descriptions in the products section are not properly aligned—please fix that as well. The pipelines are currently failing, so kindly resolve those issues too. Please address the previous feedback. Thanks!
Signed-off-by: Anuj Shrivastava <[email protected]>
|
@Achanandhi-M I just ran Prettier Pipeline locally and it made very minor changes in multiple files to fix formatting , is it okay to continue, or should i make a new fresh PR to avoid these issue . |
Signed-off-by: Anuj Shrivastava <[email protected]>
|
Fixed the allignment of descriptions in the products section . 
|
|
@Achanandhi-M I’ve also worked on resolving the pipeline failures, and they should now be running correctly. Please have a look and let me know if anything is still not behaving as expected. If there are still issues or if further refinements are needed, I’d suggest opening separate PRs for specific changes going forward to avoid bulk updates and improve clarity during reviews. Looking forward to your feedback. Thanks! |
Achanandhi-M
left a comment
Achanandhi-M
left a comment
There was a problem hiding this comment.
Hey @AnujShrivastava01, I noticed that many files were changed in this PR. Could you please limit the changes to only what’s necessary? Also, the pipelines are currently failing—could you please fix those as well? Thanks!
2 participants
What has changed?
This PR fixes mobile responsiveness and layout issues, including horizontal scrolling and content overflow on small screens.
Resolves: keploy/keploy#3446
Summary of Changes
px-4) to maximize usable screen space.Type of change
How Has This Been Tested?
npm run buildsuccessfully.npm run serveand verified layout on mobile viewports (375px width).Screenshots
Before
Before.mp4
After
After.Changes.mp4
Checklist