Several changes for mobile layout

mediagoblin/static/css/base.css

@@ -85,18 +85,14 @@ input, textarea {
 /* website structure */
 
 .mediagoblin_body {
-  position: relative;
-  min-height: 100%;
-  margin-left: auto;
-  margin-right: auto;
-  width: 960px;
+  margin: auto;
+  width: 96%;
+  max-width: 960px;
 }
 
 .mediagoblin_header {
   width: 100%;
   height: 36px;
-  margin-left: 10px;
-  margin-right: 10px;
   padding-top: 14px;
   margin-bottom: 20px;
   border-bottom: 1px solid #333;
@@ -118,16 +114,12 @@ a.mediagoblin_logo {
 
 .mediagoblin_content {
   width: 100%;
-  margin-left: 10px;
-  margin-right: 10px;
   padding-bottom: 74px;
 }
 
 .mediagoblin_footer {
   width: 100%;
   height: 30px;
-  margin-left: 10px;
-  margin-right: 10px;
   border-top: 1px solid #333;
   bottom: 0px;
   padding-top: 8px;
@@ -253,16 +245,17 @@ text-align: center;
   background-color: #222;
   background-image: url("../images/background_lines.png");
   background-repeat: repeat-x;
-  width: 340px;
-  padding: 30px 60px;
-  margin-left: auto;
-  margin-right: auto;
+  padding: 3% 5%;
   display: block;
   float: none;
+  width: 90%;
+  max-width: 340px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .form_box_xl {
-  width: 460px;
+  max-width: 460px;
 }
 
 .edit_box {
@@ -452,15 +445,8 @@ table.media_panel th {
 
 @media screen and (max-width: 960px) {
   .mediagoblin_body {
-    width: 100%;
   }
   .mediagoblin_footer {
-    position: fixed;
-    left: 0px;
-    top: 100px;
-    width: 50px;
-    height: 20px;
-    background-color: #f00;
   }
 }