Merge pull request #2690 from romulomachado/make-meetups-responsive

Make meetups page responsive

Author: locks

source/community/meetups.html.erb

@@ -1,5 +1,6 @@
 ---
 title: "Meetups"
+responsive: true
 ---
 
 <h1>Meetups Around the World</h1>

source/stylesheets/components/meetups.css.scss

@@ -0,0 +1,25 @@
+body.community_meetups_index.responsive > #content-wrapper {
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+}
+
+body.community_meetups_index.responsive #content {
+  width: 90%;
+}
+
+@media screen and (max-width: 460px) {
+  .meetups .columns {
+    margin: 0;
+  }
+
+  .meetups tr {
+    width: 100%;
+    display: block;
+  }
+
+  .meetups td {
+    width: 100%;
+    display: block;
+  }
+}

source/stylesheets/site.css.scss

@@ -21,6 +21,7 @@
 @import 'components/security';
 @import 'components/sponsors';
 @import 'components/logos';
+@import 'components/meetups';
 
 @mixin width-for-columns($cols) {
   width: $cols * $col-width + ($cols - 1) * $col-spacing;
@@ -1366,6 +1367,12 @@ body.community_meetups #content {
       width: 221px;
       height: 185px;
       margin: -35px 20px 0 auto;
+
+      @media screen and (max-width: 460px) {
+        float: none;
+        width: 100%;
+        background-repeat: no-repeat;
+      }
     }
     p {
       text-align: left;