3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-06 12:52:31 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix: consistently use max-width: 996px in media queries (#6815)

Browse source 
* fix: consistently use `max-width: 996px` in media queries

Follow `docusaurus-theme-classic` and use `996px` as the cutoff
between desktop and mobile screen width.

* revert example changes

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
This commit is contained in:
David Stotijn 2022-03-02 12:43:44 +01:00 • committed by GitHub
parent 8a24d56783
commit 2e3eec2d08
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 4 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/create-docusaurus/templates/classic/src/pages/index.module.css
View file

@ -10,7 +10,7 @@
overflow: hidden; overflow: hidden;
} }
@media screen and (max-width: 966px) { @media screen and (max-width: 996px) {
.heroBanner { .heroBanner {
padding: 2rem; padding: 2rem;
} }

2
packages/create-docusaurus/templates/facebook/src/pages/styles.module.css
View file

@ -19,7 +19,7 @@
overflow: hidden; overflow: hidden;
} }
@media screen and (max-width: 966px) { @media screen and (max-width: 996px) {
.heroBanner { .heroBanner {
padding: 2rem; padding: 2rem;
} }

4
website/docs/styling-layout.md
View file

@ -129,14 +129,14 @@ In light mode, the `<html>` element has a `data-theme="light"` attribute; and in
### Mobile View {#mobile-view} ### 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 ```css
.banner { .banner {
padding: 4rem; padding: 4rem;
} }
/** In mobile view, reduce the padding */ /** In mobile view, reduce the padding */
@media screen and (max-width: 966px) { @media screen and (max-width: 996px) {
.heroBanner { .heroBanner {
padding: 2rem; padding: 2rem;
} }