Toying around with making the calendar more responsive. Scales to the maximum...

Toying around with making the calendar more responsive. Scales to the maximum width of the page better, but is very cramped on a portrait mobile-device (Nexus 5). Corrected the previous padding change for responsiveness.

srctweb/website/static/css/style.css

@@ -48,10 +48,37 @@ a[name] {
 .smidge {
   padding-bottom: 10px;
 }
-
 .people-left {
   padding-left:0;
+  padding-right:0;
 }
 .people-right {
   padding-right:0;
+  padding-left:0;
+}
+@media(min-width:992px){
+  .people-left {
+    padding-right:15px;
+  }
+  .people-right {
+    padding-left:15px;
+  }
+}
+/**
+* A cool little hack I found to try to allow a responsive Google Cal:
+* http://themeloom.com/2013/02/tips-embed-google-maps-and-calendars-in-a-responsive-wordpress-theme/
+**/
+.googlecal-container {
+    position: relative;
+    padding-bottom: 56.25%;
+    padding-top: 30px;
+    height: 0;
+    overflow: hidden;
+}
+.googlecal-container iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
 }
\ No newline at end of file

srctweb/website/templates/calendar.html

@@ -11,7 +11,11 @@ SRCT | Calendar
 </div>
 
 <div class="text-center">
-  <div class="visible-lg">
+  <div class="googlecal-container">
+  <iframe src="https://www.google.com/calendar/embed?title=Student-Run%20Computing%20and%20Technology&amp;showPrint=0&amp;showCalendars=0&amp;height=400&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=kaiuicpoki9p3u92eklent0eec%40group.calendar.google.com&amp;color=%23711616&amp;ctz=America%2FNew_York" style=" border-width:0 " width="425" height="350" frameborder="0" scrolling="no"></iframe>
+
+  </div>
+<!--   <div class="visible-lg">
     <iframe src="https://www.google.com/calendar/embed?title=Student-Run%20Computing%20and%20Technology&amp;showPrint=0&amp;showCalendars=0&amp;height=700&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=kaiuicpoki9p3u92eklent0eec%40group.calendar.google.com&amp;color=%23711616&amp;ctz=America%2FNew_York" style=" border-width:0 " width="850" height="650" frameborder="0" scrolling="no"></iframe> 
   </div>
 
@@ -21,7 +25,7 @@ SRCT | Calendar
 
   <div class="visible-xs">
     <iframe src="https://www.google.com/calendar/embed?title=Student-Run%20Computing%20and%20Technology&amp;showPrint=0&amp;showCalendars=0&amp;height=400&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=kaiuicpoki9p3u92eklent0eec%40group.calendar.google.com&amp;color=%23711616&amp;ctz=America%2FNew_York" style=" border-width:0 " width="600" height="400" frameborder="0" scrolling="no"></iframe>
-  </div>
+  </div> -->
 </div>
 
 {% endblock %}