diff --git a/frontend/src/css/shared-file-view.css b/frontend/src/css/shared-file-view.css
index e967a5bda8..93696d1b48 100644
--- a/frontend/src/css/shared-file-view.css
+++ b/frontend/src/css/shared-file-view.css
@@ -82,6 +82,17 @@
 
 @media (max-width: 768px) {
   .shared-file-view-body .md-view {
-    padding: 40px;
+    padding: 0 10px;
+    width: 100%;
+  }
+
+  .shared-file-view-body .md-view .article {
+    display: flex;
+    padding: 20px;
+    margin: 0;
+  }
+
+  .shared-file-view-body .seafile-markdown-outline {
+    display: none;
   }
 }
diff --git a/frontend/src/shared-file-view-markdown.js b/frontend/src/shared-file-view-markdown.js
index 4dd2151650..ad83652871 100644
--- a/frontend/src/shared-file-view-markdown.js
+++ b/frontend/src/shared-file-view-markdown.js
@@ -83,7 +83,7 @@ class FileContent extends React.Component {
 
     return (
       <div className="shared-file-view-body">
-        <div className="md-view h-100">
+        <div className="md-view">
           <MarkdownViewer
             scriptSource={mediaUrl + 'js/mathjax/tex-svg.js'}
             markdownContent={this.state.markdownContent}