diff --git a/packages/create-docusaurus/templates/classic/src/pages/index.module.css b/packages/create-docusaurus/templates/classic/src/pages/index.module.css index 666feb6a17..9f71a5da77 100644 --- a/packages/create-docusaurus/templates/classic/src/pages/index.module.css +++ b/packages/create-docusaurus/templates/classic/src/pages/index.module.css @@ -10,7 +10,7 @@ overflow: hidden; } -@media screen and (max-width: 966px) { +@media screen and (max-width: 996px) { .heroBanner { padding: 2rem; } diff --git a/packages/create-docusaurus/templates/facebook/src/pages/styles.module.css b/packages/create-docusaurus/templates/facebook/src/pages/styles.module.css index 76db00c17c..da1454b3f3 100644 --- a/packages/create-docusaurus/templates/facebook/src/pages/styles.module.css +++ b/packages/create-docusaurus/templates/facebook/src/pages/styles.module.css @@ -19,7 +19,7 @@ overflow: hidden; } -@media screen and (max-width: 966px) { +@media screen and (max-width: 996px) { .heroBanner { padding: 2rem; } diff --git a/website/docs/styling-layout.md b/website/docs/styling-layout.md index e2f877d4b3..1431b1e158 100644 --- a/website/docs/styling-layout.md +++ b/website/docs/styling-layout.md @@ -129,14 +129,14 @@ In light mode, the `` element has a `data-theme="light"` attribute; and in ### Mobile View {#mobile-view} -Docusaurus uses `966px` as the cutoff between mobile screen width and desktop. If you want your layout to be different in the mobile view, you can use media queries. +Docusaurus uses `996px` as the cutoff between mobile screen width and desktop. If you want your layout to be different in the mobile view, you can use media queries. ```css .banner { padding: 4rem; } /** In mobile view, reduce the padding */ -@media screen and (max-width: 966px) { +@media screen and (max-width: 996px) { .heroBanner { padding: 2rem; }