StarMirror/github-markdown-css
1
0
Fork 0
mirror of https://github.com/sindresorhus/github-markdown-css.git synced 2024-03-22 13:10:53 +08:00
Code Issues Projects Releases Wiki Activity

Document mobile responsiveness (#45)

Browse Source
This commit is contained in:
Jeff Puckett 2017-06-15 10:43:33 +00:00 committed by Sindre Sorhus
parent 576e8f6479
commit c59b17b20d
1 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
readme.md
View File

@ -18,9 +18,10 @@ $ npm install --save github-markdown-css
## Usage ## Usage
Import the `github-markdown.css` file and add a `markdown-body` class to the container of your rendered Markdown and set a width for it. GitHub uses `980px` width and `45px` padding. Import the `github-markdown.css` file and add a `markdown-body` class to the container of your rendered Markdown and set a width for it. GitHub uses `980px` width and `45px` padding, and `15px` padding for mobile.
```html ```html
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="github-markdown.css"> <link rel="stylesheet" href="github-markdown.css">
<style> <style>
.markdown-body { .markdown-body {
@ -30,6 +31,12 @@ Import the `github-markdown.css` file and add a `markdown-body` class to the con
margin: 0 auto; margin: 0 auto;
padding: 45px; padding: 45px;
} }
@media (max-width: 767px) {
.markdown-body {
padding: 15px;
}
}
</style> </style>
<article class="markdown-body"> <article class="markdown-body">
<h1>Unicorns</h1> <h1>Unicorns</h1>