feat: enhance mobile responsiveness with viewport meta tag and CSS ad… #728
Conversation
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Pull request overview
This PR addresses mobile and tablet responsiveness issues across the Keploy documentation site by adding a viewport meta tag and implementing comprehensive CSS media queries to prevent horizontal scrolling and optimize layout for different screen sizes.
Key Changes:
- Added explicit viewport meta tag configuration in Docusaurus config
- Implemented mobile-first CSS fixes to prevent horizontal overflow and adjust element sizing
- Created responsive breakpoints for Products section to stack on mobile (≤640px) and reduce card width on tablet (641px-1024px)
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| docusaurus.config.js | Adds viewport meta tag to headTags with mobile scaling configuration |
| src/css/custom.css | Implements three media query breakpoints for mobile (≤768px), tablet Products (641px-1024px), and mobile Products (≤640px) with extensive responsive fixes |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| * { | ||
| max-width: 100vw; | ||
| } |
There was a problem hiding this comment.
Using the universal selector * with max-width: 100vw on every element can significantly impact performance and may cause unintended layout issues. This forces the browser to apply this style to every single DOM element on mobile devices, which is computationally expensive.
Instead of applying to all elements, target only the specific containers that are causing overflow issues. This is more performant and precise.
| * { | |
| max-width: 100vw; | |
| } |
| @media screen and (max-width: 768px) { | ||
| * { | ||
| max-width: 100vw; | ||
| } | ||
|
|
||
| html, body { | ||
| overflow-x: hidden !important; | ||
| width: 100%; | ||
| max-width: 100vw; | ||
| } | ||
|
|
||
| footer, .navbar, article, main, .main-wrapper { | ||
| max-width: 100vw !important; | ||
| overflow-x: hidden !important; | ||
| width: 100% !important; | ||
| } | ||
|
|
||
| footer { | ||
| padding-left: 1rem !important; | ||
| padding-right: 1rem !important; | ||
| } | ||
|
|
||
| .footer__icons { | ||
| flex-wrap: wrap !important; | ||
| justify-content: center !important; | ||
| width: 100% !important; | ||
| } | ||
|
|
||
| .footer__copyright, .footer__link-item { | ||
| width: 100% !important; | ||
| text-align: center !important; | ||
| } | ||
|
|
||
| .DocSearch-Button { | ||
| width: 100% !important; | ||
| max-width: 200px !important; | ||
| } | ||
|
|
||
| .navbar__items { | ||
| max-width: 100% !important; | ||
| } | ||
|
|
||
| .navbar__inner { | ||
| padding-left: 1rem !important; | ||
| padding-right: 1rem !important; | ||
| } | ||
|
|
||
| img, video, iframe, pre, table { | ||
| max-width: 100% !important; | ||
| } | ||
| } |
There was a problem hiding this comment.
There's an inconsistency in breakpoints between media queries. The mobile query uses max-width: 768px while the Products section mobile query uses max-width: 640px. This creates a gap (641px-768px) where the mobile fixes apply but the Products section doesn't stack vertically.
For consistency and to avoid layout issues, the breakpoints should align. Consider using the same breakpoint value (e.g., 640px or 768px) across all mobile media queries, or ensure the ranges are intentionally designed and documented.
| overflow-x: hidden !important; | ||
| width: 100%; | ||
| max-width: 100vw; | ||
| } | ||
|
|
||
| footer, .navbar, article, main, .main-wrapper { | ||
| max-width: 100vw !important; | ||
| overflow-x: hidden !important; | ||
| width: 100% !important; | ||
| } | ||
|
|
||
| footer { | ||
| padding-left: 1rem !important; | ||
| padding-right: 1rem !important; | ||
| } | ||
|
|
||
| .footer__icons { | ||
| flex-wrap: wrap !important; | ||
| justify-content: center !important; | ||
| width: 100% !important; | ||
| } | ||
|
|
||
| .footer__copyright, .footer__link-item { | ||
| width: 100% !important; | ||
| text-align: center !important; | ||
| } | ||
|
|
||
| .DocSearch-Button { | ||
| width: 100% !important; | ||
| max-width: 200px !important; | ||
| } | ||
|
|
||
| .navbar__items { | ||
| max-width: 100% !important; | ||
| } | ||
|
|
||
| .navbar__inner { | ||
| padding-left: 1rem !important; | ||
| padding-right: 1rem !important; | ||
| } | ||
|
|
||
| img, video, iframe, pre, table { | ||
| max-width: 100% !important; | ||
| } | ||
| } | ||
|
|
||
| /* Fix Products section - reduce size on tablet */ | ||
| @media screen and (min-width: 641px) and (max-width: 1024px) { | ||
| ul.grid-flow-col { | ||
| grid-auto-columns: 220px !important; | ||
| } | ||
| } | ||
|
|
||
| /* Fix Products section - stack on mobile */ | ||
| @media screen and (max-width: 640px) { | ||
| ul.grid-flow-col { | ||
| grid-auto-flow: row !important; | ||
| grid-auto-columns: unset !important; |
There was a problem hiding this comment.
Excessive use of !important declarations (used 16 times in this media query) can make the styles difficult to maintain and override in the future. While !important may be necessary to override Docusaurus's built-in styles in some cases, consider whether all these declarations truly need it.
A better approach would be to increase CSS specificity or identify which styles genuinely require !important to override framework defaults, and remove it from the others.
| overflow-x: hidden !important; | |
| width: 100%; | |
| max-width: 100vw; | |
| } | |
| footer, .navbar, article, main, .main-wrapper { | |
| max-width: 100vw !important; | |
| overflow-x: hidden !important; | |
| width: 100% !important; | |
| } | |
| footer { | |
| padding-left: 1rem !important; | |
| padding-right: 1rem !important; | |
| } | |
| .footer__icons { | |
| flex-wrap: wrap !important; | |
| justify-content: center !important; | |
| width: 100% !important; | |
| } | |
| .footer__copyright, .footer__link-item { | |
| width: 100% !important; | |
| text-align: center !important; | |
| } | |
| .DocSearch-Button { | |
| width: 100% !important; | |
| max-width: 200px !important; | |
| } | |
| .navbar__items { | |
| max-width: 100% !important; | |
| } | |
| .navbar__inner { | |
| padding-left: 1rem !important; | |
| padding-right: 1rem !important; | |
| } | |
| img, video, iframe, pre, table { | |
| max-width: 100% !important; | |
| } | |
| } | |
| /* Fix Products section - reduce size on tablet */ | |
| @media screen and (min-width: 641px) and (max-width: 1024px) { | |
| ul.grid-flow-col { | |
| grid-auto-columns: 220px !important; | |
| } | |
| } | |
| /* Fix Products section - stack on mobile */ | |
| @media screen and (max-width: 640px) { | |
| ul.grid-flow-col { | |
| grid-auto-flow: row !important; | |
| grid-auto-columns: unset !important; | |
| overflow-x: hidden; | |
| width: 100%; | |
| max-width: 100vw; | |
| } | |
| footer, .navbar, article, main, .main-wrapper { | |
| max-width: 100vw; | |
| overflow-x: hidden; | |
| width: 100%; | |
| } | |
| footer { | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| } | |
| .footer__icons { | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| width: 100%; | |
| } | |
| .footer__copyright, .footer__link-item { | |
| width: 100%; | |
| text-align: center; | |
| } | |
| .DocSearch-Button { | |
| width: 100%; | |
| max-width: 200px; | |
| } | |
| .navbar__items { | |
| max-width: 100%; | |
| } | |
| .navbar__inner { | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| } | |
| img, video, iframe, pre, table { | |
| max-width: 100%; | |
| } | |
| } | |
| /* Fix Products section - reduce size on tablet */ | |
| @media screen and (min-width: 641px) and (max-width: 1024px) { | |
| ul.grid-flow-col { | |
| grid-auto-columns: 220px; | |
| } | |
| } | |
| /* Fix Products section - stack on mobile */ | |
| @media screen and (max-width: 640px) { | |
| ul.grid-flow-col { | |
| grid-auto-flow: row; | |
| grid-auto-columns: unset; |
| tagName: "meta", | ||
| attributes: { | ||
| name: "viewport", | ||
| content: "width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes", |
There was a problem hiding this comment.
The viewport meta tag includes maximum-scale=5.0 which restricts users' ability to zoom. While this is better than maximum-scale=1.0, any maximum-scale restriction can create accessibility barriers for users with visual impairments who need to zoom in beyond the set limit.
For better accessibility compliance with WCAG 2.1 Success Criterion 1.4.4 (Resize text), consider removing the maximum-scale parameter entirely to allow unrestricted zooming: "width=device-width, initial-scale=1.0, user-scalable=yes"
| content: "width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes", | |
| content: "width=device-width, initial-scale=1.0, user-scalable=yes", |
| // Viewport meta tag for mobile responsiveness | ||
| { | ||
| tagName: "meta", | ||
| attributes: { | ||
| name: "viewport", | ||
| content: "width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes", | ||
| }, | ||
| }, |
There was a problem hiding this comment.
Docusaurus automatically includes a viewport meta tag with width=device-width, initial-scale=1.0 by default. Adding another viewport meta tag in headTags may result in duplicate viewport tags in the HTML output, which can cause unpredictable behavior across different browsers.
The Docusaurus default viewport configuration should already handle mobile responsiveness correctly. If the default viewport isn't working as expected, the issue is likely in the CSS rather than the viewport tag itself. Consider removing this addition and relying on Docusaurus's built-in viewport handling.
| // Viewport meta tag for mobile responsiveness | |
| { | |
| tagName: "meta", | |
| attributes: { | |
| name: "viewport", | |
| content: "width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes", | |
| }, | |
| }, |
|
iv design responsible ui |
Achanandhi-M
left a comment
Achanandhi-M
left a comment
There was a problem hiding this comment.
Hey @Kunal1522 can you please fix the CI pipelines, currently it is failing
|
yes i am on it .will fix it asap |
3 participants
What has changed?
This PR fixes mobile and tablet responsiveness issues across the documentation site. The changes ensure proper viewport scaling, prevent horizontal scrolling, and optimize the Products section layout for different screen sizes.
Changes made:
BEFORE
Screencast.from.2025-12-08.14-37-38.webm
AFTER
Screencast.from.2025-12-08.14-43-13.webm
Type of change
How Has This Been Tested?
Tested on:
Testing Steps:
Checklist: