Making more of the site smartphone friendly

For example limiting field widths to 100%, extending other elements
to full width, etc.

diff --git a/public/stylesheets/small.css b/public/stylesheets/small.css
index 59a38bba49618a23ad0b2b886b657a7761111fbb..a00434d5926497db999bcdf7473d09746d8092ac 100644 (file)
--- a/public/stylesheets/small.css
+++ b/public/stylesheets/small.css
@@ -22,7 +22,7 @@ h1 {
 {
   height: 14px;
   margin: 0px;
-  padding-left: 10px;
+  padding-left: 3px;
   padding-top: 5px;
   margin-top: 18px;
   background: url('../images/tab_bottom.gif') repeat-x bottom;
@@ -46,7 +46,7 @@ h1 {
   display: block;
   position: absolute;
   top: 0;
-  margin: 3px;
+  margin: 2px;
 }
 
 #small-title img {
@@ -131,3 +131,37 @@ h1 {
   width: 100%;
   max-width: 18em;
 }
+
+/* Rules for the profile page */
+
+.user_map {
+  width: 100% !important;
+  height: 300px !important;
+}
+
+/* Rules for the browse pages */
+
+#browse_navigation {
+  width: 100% !important;
+  margin-top: 0 !important;
+}
+
+#small_map, #browse_map {
+  width: 100% !important;
+}
+
+/* Rules for the diary entries pages */
+
+#diary_entry_title, #diary_entry_body, #diary_entry_language_code, #diary_comment_body {
+  width: 100% !important;
+}
+
+#usemap {
+  display: block;
+}
+
+/* Rules for the messaging pages */
+
+#message_title, #message_body {
+  width: 100% !important;
+}