Style marketing boxes for phones and tablets.

Author: espenak

index.html

@@ -108,21 +108,18 @@
     <!-- Three columns of text below the carousel -->
     <div class="row">
         <div class="span4">
-            <!--<img class="img-circle" data-src="holder.js/140x140">-->
             <i class="icon-tag marketing-huge-icon"></i>
             <h2>About</h2>
             <p>Devilry is a system optimized for delivering and correcting electronic deliveries. This narrow focus enables us to avoid unneeded clutter common to less focused systems.</p>
             <p><a class="btn" href="#about">Read more&raquo;</a></p>
         </div><!-- /.span4 -->
         <div class="span4">
-            <!--<img class="img-circle" data-src="holder.js/140x140">-->
             <i class="icon-comments marketing-huge-icon"></i>
             <h2>Help</h2>
             <p>Submit bugs, problems, improvements or new features via our issue tracker, or help other users on our Q&amp;A forum.</p>
             <p><a class="btn" href="#help">Read more&raquo;</a></p>
         </div><!-- /.span4 -->
         <div class="span4">
-            <!--<img class="img-circle" data-src="holder.js/140x140">-->
             <i class="icon-coffee marketing-huge-icon"></i>
             <h2>Develop</h2>
             <p>Devilry is open source, and we have an open community. This means that you can help us develop Devilry.</p>

less/marketing.less

@@ -1,19 +1,49 @@
 .marketing {
     margin-top: 40px;
-    .marketing-huge-icon {
-        font-size: 150px;
-    }
 
     /* Center align the text within the three columns below the carousel */
     .span4 {
         text-align: center;
-        p {
-            margin-left: 10px;
-            margin-right: 10px;
+        .marketing-huge-icon {
+            font-size: 150px;
+        }
+        h2 {
+            font-weight: normal;
+        }
+        @media (max-width: 767px) { /* Phones to portrait tablet */
+            position: relative;
+            .marketing-huge-icon {
+                position: absolute;
+                top: 30px;
+                left: 0;
+                font-size: 100px;
+            }
+            padding-left: 130px;
+            padding-top: 6px;
+            text-align: left;
+            min-height: 180px;
+            margin-bottom: 30px;
+        }
+        @media (max-width: 500px) { /* Phones */
+            h2 {
+                margin: 0;
+                padding: 0;
+                position: absolute;
+                top: 0;
+                left: 0;
+            }
+            .marketing-huge-icon {
+                top: 50px;
+            }
+        }
+        @media (max-width: 280px) { /* Very small phones */
+            padding-left: 0;
+            h2,
+            .marketing-huge-icon {
+                padding: 0 0 10px 0;
+                position: static;
+            }
         }
-    }
-    h2 {
-        font-weight: normal;
     }
 }