Skip to content

feat: enhance mobile responsiveness with viewport meta tag and CSS ad… #728

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Kunal1522 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: enhance mobile responsiveness with viewport meta tag and CSS ad… #728

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
12abc6f
feat: enhance mobile responsiveness with viewport meta tag and CSS ad…
Kunal1522 Dec 5, 2025
5139608
Merge branch 'main' into add-reponsive-to-mobile
Kunal1522 Dec 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions docusaurus.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,14 @@ module.exports = {
{name: "twitter:card", content: "summary_large_image"},
],
headTags: [
// 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",
Copy link

Copilot AI Dec 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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"

Suggested change
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",

Copilot uses AI. Check for mistakes.
},
},
Comment on lines +57 to +64
Copy link

Copilot AI Dec 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
// 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",
},
},

Copilot uses AI. Check for mistakes.
// Preconnect tag
{
tagName: "link",
Expand Down
67 changes: 67 additions & 0 deletions src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -873,4 +873,71 @@ textarea {
background-color: #e67643 !important;
}

/* Mobile responsiveness fixes */
@media screen and (max-width: 768px) {
* {
max-width: 100vw;
}
Comment on lines +878 to +880
Copy link

Copilot AI Dec 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
* {
max-width: 100vw;
}

Copilot uses AI. Check for mistakes.

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;
}
}
Comment on lines +877 to +927
Copy link

Copilot AI Dec 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.

/* 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;
Comment on lines +883 to +940
Copy link

Copilot AI Dec 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
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;

Copilot uses AI. Check for mistakes.
}
}