Bläddra i källkod

Mobile: more tuning for responsive views - resizing spans to make them fit into their appropriate screen size

Yannick Warnier 12 år sedan
förälder
incheckning
0b4be18629
2 ändrade filer med 80 tillägg och 0 borttagningar
  1. 9 0
      main/css/base.css
  2. 71 0
      main/css/responsive.css

+ 9 - 0
main/css/base.css

@@ -259,6 +259,9 @@ form .formw input {
 #main_content .span9 {
   float: left;
 }
+#main_content .span6 {
+  width: 565px;
+}
 
 
 /* New changes Chamilo 1.9 */
@@ -4678,3 +4681,9 @@ i.size-32.icon-new-work{
 #filepaths input{
     margin-bottom:5px;    
 }
+.section-social #main_content .span3 {
+  float: left;
+}
+.section-social #main_content .span9 {
+  float: right;
+}

+ 71 - 0
main/css/responsive.css

@@ -148,6 +148,31 @@
         margin-left: 10px;
         margin-right: 10px;
     }
+    .section-social #main_content .span3 {
+        width: 170px;
+    }
+    .section-social #main_content .span4 {
+        width: 200px;
+        margin-left: 5px;
+        float: right;
+    }
+    .section-social #main_content .span5 {
+        width: 240px;
+        margin-left: 5px;
+        float: left;
+    }
+    #main_content .span6 {
+        width: 400px;
+        min-height: 200px;
+    }
+    #main_content .span9 {
+        width: 420px;
+        margin-left: 5px;
+    }
+    .section-social #main_content .span9 {
+        width: 480px;
+        margin-left: 5px;
+    }
 }
 
 @media (max-width: 767px) {
@@ -254,6 +279,32 @@
                 border-radius: 4px 4px 0 0;
     }
 
+    .section-social #main_content .span3 {
+        width: 170px;
+    }
+    .section-social #main_content .span4 {
+        width: 200px;
+        margin-left: 5px;
+        float: right;
+    }
+    .section-social #main_content .span5 {
+        width: 240px;
+        margin-left: 5px;
+        float: left;
+    }
+    #main_content .span6 {
+        width: 328px;
+        float: left;
+        margin-left: 5px;
+    }
+    #main_content .span9 {
+        width: 420px;
+        margin-left: 5px;
+    }
+    .section-social #main_content .span9 {
+        width: 480px;
+        margin-left: 5px;
+    }
 
     /* Footer fixes */
     
@@ -300,6 +351,20 @@
    .subnav .nav > li > a:hover,
    .subnav .dropdown-menu a:hover {
     }
+    .section-social #main_content .span3 {
+        width: 190px;
+    }
+    #main_content .span4, #main_content .span5 {
+        width: 250px;
+        margin-left: 5px;
+    }
+    #main_content .span6 {
+        width: 340px;
+    }
+    #main_content .span9 {
+        width: 500px;
+        margin-left: 5px;
+    }
 }
 
 @media (max-width: 979px) {
@@ -324,6 +389,12 @@
     #course_tools .row > [class*="span"], #course_tools  .row-fluid > [class*="span"] {     
         float: left;     
     }
+    #main_content .span6 {
+        width: 450px;
+    }
+    .section-social #main_content .span3 {
+        width: 200px;
+    }
 }