diff --git a/media/css/file_view_extra.css b/media/css/file_view_extra.css
index 8de07d9cf2..dce469a9e5 100644
--- a/media/css/file_view_extra.css
+++ b/media/css/file_view_extra.css
@@ -1,10 +1,6 @@
-#header,
-#footer {
-    display:none;
-}
 #main {
-    width:100%;
     min-height:0;
+    padding:0;
 }
 #view-hd,
 #shared-file-view-hd,
@@ -34,6 +30,11 @@
     border:1px solid #ededed;
     margin-top:12px;
 }
+@media (max-width:950px) {
+    #file-view {
+        width:950px;
+    }
+}
 #md-view,
 .CodeMirror,
 #file-view-tip {
diff --git a/media/css/seahub.css b/media/css/seahub.css
index 992c9f5c15..10d8ff65be 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -169,7 +169,7 @@ form,input,textarea,select,button,img {
 body, input, textarea, button, select {
     font: 13px/1.5 Arial, Helvetica, sans-serif;
     color: #333;
-    word-wrap:break-word; /* for en */
+    word-break:break-all; /* for en */
 }
 input, button, select { line-height:19px;/*for ff*/ }
 h1, h2, h3, h4, h5, h6 {
@@ -316,10 +316,24 @@ table {
     width:100%;
     margin:8px 0 40px;
 }
-caption { font-size:1.1em; font-weight:bold; margin-bottom:.6em; }
-th { text-align:left; font-weight:normal; color:#9c9c9c; }
-td, th { padding:5px 3px; word-wrap:break-word; border-bottom:1px solid #eee; }
-td { color: #333; font-size:14px; }
+caption {
+    font-size:1.1em;
+    font-weight:bold;
+    margin-bottom:.6em;
+}
+th {
+    text-align:left;
+    font-weight:normal;
+    color:#9c9c9c;
+}
+th, td {
+    padding:5px 3px;
+    border-bottom:1px solid #eee;
+}
+td {
+    color: #333;
+    font-size:14px;
+}
 table img { vertical-align:middle; }
 /* custom scrollbar */
 ::-webkit-scrollbar {
@@ -998,6 +1012,11 @@ textarea:-moz-placeholder {/* for FF */
     box-shadow:0 3px 2px #f5f5f5;
     margin:5em auto;
 }
+@media (max-width: 387px) {
+    .new-narrow-panel {
+        width:100%;
+    }
+}
 .new-narrow-panel .hd {
     color:#fff;
     font-size:16px;
@@ -1006,7 +1025,9 @@ textarea:-moz-placeholder {/* for FF */
     border-bottom:1px solid #d5d5d5;
 }
 .new-narrow-panel .con {
-    padding:30px 60px 60px;
+    padding:30px 0 60px;
+    width:268px; 
+    margin:0 auto;
 }
 .new-narrow-panel .input {
     font-size:14px;
@@ -1530,7 +1551,6 @@ button.sf-dropdown-toggle:focus {
     border-radius:2px;
 }
 #dir-view .repo-op {
-    height:48px;
     position: relative; /* for '#upload-menu' */
 }
 #right-panel .hd,
@@ -1626,6 +1646,11 @@ button.sf-dropdown-toggle:focus {
     position:relative;
     margin:10px 0 0 25px;
 }
+@media (max-width: 390px) {
+    #notifications {
+        margin-left:5px;
+    }
+}
 #notifications .sf2-icon-bell {
     font-size:24px;
     line-height:1;
@@ -1686,6 +1711,11 @@ button.sf-dropdown-toggle:focus {
     position:relative;
     margin-left:32px;
 }
+@media (max-width: 390px) {
+    #account {
+        margin-left:5px;
+    }
+}
 #account .avatar {
     vertical-align:middle;
     border-radius:1000px;
@@ -2021,7 +2051,6 @@ button.sf-dropdown-toggle:focus {
 }
 .repo-file-list .dirent-name {
     display:inline-block;
-    word-break:break-all;
 }
 .repo-file-list .file-locked-icon {
     position:absolute;
@@ -2786,6 +2815,11 @@ button.sf-dropdown-toggle:focus {
     width:155px;
     padding:1px 30px 1px 5px;
 }
+@media (max-width: 390px) {
+    #top-search-form .search-input {
+        width:130px;
+    }
+}
 #search-form,
 #search-user-form,
 #search-repo-form {
diff --git a/seahub/templates/base.html b/seahub/templates/base.html
index f244e97ec0..f0fbf1d852 100644
--- a/seahub/templates/base.html
+++ b/seahub/templates/base.html
@@ -7,6 +7,9 @@
 <title>{% block sub_title %}{% endblock %}{{ site_title }}</title>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <meta name="keywords" content="{% trans "File Collaboration Team Organization" %}" />
+{% block viewport %}
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+{% endblock %}
 <link rel="icon" type="image/x-icon" href="{{ MEDIA_URL }}img/favicon.png?t=1398068110" />
 <!--[if IE]>
 <link rel="shortcut icon" href="{{ MEDIA_URL }}img/favicon.png?t=1398068110"/>
diff --git a/seahub/templates/shared_file_view.html b/seahub/templates/shared_file_view.html
index 8b513d0dab..4e164c8090 100644
--- a/seahub/templates/shared_file_view.html
+++ b/seahub/templates/shared_file_view.html
@@ -1,22 +1,18 @@
 {% extends "base.html" %}
 {% load seahub_tags i18n %}
 
+{% block viewport %}{% endblock %}
+
 {% block extra_style %}
 {% include 'snippets/file_view_style.html' %}
-<style type="text/css">
-    #header {
-        display:block;
-    }
-</style>
 {% endblock %}
 
-
-{% block main_panel %}
+{% block main_content %}
     {% if traffic_over_limit %}
         <p class="strip-tip">{% trans "File download is disabled: the share link traffic of owner is used up." %}</p>
     {% endif %}
     <div id="shared-file-view-hd" class="ovhd">
-        <div class="fleft">
+        <div class="fleft js-file-info">
             <h2 class="ellipsis no-bold" title="{{ file_name }}">{{ file_name }}</h2>
             {% if zipped %}
             <p class="cur-path ellipsis">
@@ -34,7 +30,7 @@
             {% endif %}
         </div>
 
-        <div class="fright">
+        <div class="fright js-file-op">
             {% if request.user.is_authenticated and request.user.username != shared_by %}
               {% if save_to_link %}
               <button data="{{save_to_link}}" id="save" class="shared-file-op-btn">{% trans "Save to..."%}</button>
@@ -77,7 +73,8 @@ $(function() {
     $('#file-view-tip').append(dld_btn);
 });
 $(function () {
-    $('#view-hd .ellipsis').css({'max-width': $('#view-hd').width() - $('#view-hd .fright').outerWidth(true) - 10});
+    var $hd = $('#shared-file-view-hd');
+    $('.js-file-info', $hd).css({'max-width': $hd.width() - $('.js-file-op', $hd).outerWidth(true) - 10});
 });
 
 {% if filetype == 'PDF' and use_pdfjs %}
diff --git a/seahub/templates/snippets/file_view_style.html b/seahub/templates/snippets/file_view_style.html
index ded4123f6e..26be08f8b4 100644
--- a/seahub/templates/snippets/file_view_style.html
+++ b/seahub/templates/snippets/file_view_style.html
@@ -3,7 +3,7 @@
 <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}codemirror/codemirror.css" />
 <style type="text/css">
     {% if fileext == 'txt' or fileext == 'text' %}
-.CodeMirror { width:624px; padding:40px 96px; }
+.CodeMirror { width:816px; padding:40px 96px; }
     {% endif %}
 </style>
 {% endif %}
diff --git a/seahub/templates/view_file_base.html b/seahub/templates/view_file_base.html
index 2fc8ec378f..d23fd50688 100644
--- a/seahub/templates/view_file_base.html
+++ b/seahub/templates/view_file_base.html
@@ -3,14 +3,16 @@
 {% load url from future %}
 
 {% block sub_title %}{{filename}} - {% endblock %}
+{% block viewport %}{% endblock %}
 
 {% block extra_style %}
 <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/file_view_extra.css" />
 {% endblock %}
 
+{% block header_css_class %}hide{% endblock %}
 {% block main_css_class %}{% endblock %} {# remove the padding-top css #}
 
-{% block main_panel %}
+{% block main_content %}
     <div id="view-hd">
         <h2>{{ filename }}
             {% if is_starred %}
diff --git a/seahub/templates/view_history_file.html b/seahub/templates/view_history_file.html
index ac72697d8c..32b23da7f8 100644
--- a/seahub/templates/view_history_file.html
+++ b/seahub/templates/view_history_file.html
@@ -2,13 +2,16 @@
 {% load seahub_tags avatar_tags i18n %}
 {% load url from future %}
 
+{% block viewport %}{% endblock %}
+
 {% block extra_style %}
 {% include 'snippets/file_view_style.html' %}
 {% endblock %}
 
+{% block header_css_class %}hide{% endblock %}
 {% block main_css_class %}{% endblock %} {# remove the padding-top css #}
 
-{% block main_panel %}
+{% block main_content %}
     <div id="view-hd">
       {% block view_hd %}
         <h2>