Resposive part of slideshow and calendar column on home page

diff --git a/Toolkit/RotatingImages/templates/rotatingImages.html b/Toolkit/RotatingImages/templates/rotatingImages.html
index 7c938bc..5e71f98 100755 (executable)
--- a/Toolkit/RotatingImages/templates/rotatingImages.html
+++ b/Toolkit/RotatingImages/templates/rotatingImages.html
@@ -20,14 +20,14 @@
     }
 </style>
 {if:images}
-<div id="slider-wrapper" class="slider-wrapper theme-default">
+ <div id="slider-wrapper" class="slider-wrapper theme-default">
     <div class="ribbon"></div>
     <div id="slider" class="nivoSlider">
     {foreach:images,image}
         {image.toHtml():h}
     {end:}
     </div>
-</div>
+ </div> 
 <div flexy:foreach="images,image" id="event-{image.getId():h}" class="nivo-html-caption">
     {if:image.getTitle()}<strong>{image.getTitle()}</strong>{end:}
     {if:image.getDescr()}<span>{image.getDescr()}</span>{end:}

diff --git a/styles.css b/styles.css
index 8265378..944961d 100755 (executable)
--- a/styles.css
+++ b/styles.css
@@ -1,3 +1,12 @@
+#slideshow {\r
+    position: relative;\r
+    }\r
+#slider-wrapper {\r
+    position: absolute !important;\r
+    top: 0;\r
+    left: 0;\r
+    }\r
+\r
 nav.tab-bar a #logoTop {\r
     margin-left: 60px;\r
     max-height: 100%;}\r
@@ -243,7 +252,18 @@ a:hover {
 #footer div#copyright a {\r
     display: inline;\r
     }\r
-/* Events on Home Page */\r
+/* Events on Home Page\r
+#eventHomeColumn {\r
+    height: 480px;\r
+    }\r
+ */\r
+/* @media only screen and (max-width: 55em) {\r
+    #eventHomeColumn {\r
+        max-height: 350px;\r
+        }\r
+    }\r
+}\r
+*/\r
 #homepage_events_wrapper {\r
     background: #216083;\r
     }\r
@@ -276,6 +296,19 @@ a:hover {
     font-size: 12px;\r
     padding: 8px 7px;\r
     }\r
+@media only screen and (max-width: 58em) {\r
+    #eventCalendar td {\r
+        padding: 5px;\r
+        }\r
+    }\r
+@media only screen and (max-width: 50em) {\r
+    #eventCalendar table {\r
+        display: none;\r
+        }\r
+    }\r
+#eventCalendar th {\r
+    padding: 2px;\r
+    }\r
 #eventCalendar table,\r
 #eventCalendar tr,\r
 #eventCalendar th,\r
@@ -386,6 +419,7 @@ a:hover {
 /* end subsub */\r
 #main {\r
     margin-top: 16px;\r
+    clear: both;\r
     }\r
 #breadcrumbs {\r
     font-size: 12px;\r

diff --git a/templates/template.html b/templates/template.html
index 8c4940a..0db28e2 100755 (executable)
--- a/templates/template.html
+++ b/templates/template.html
@@ -66,14 +66,15 @@
                     </div>
 
 
-                    <div class="row clearfix" id="homeSlide" flexy:if="isHomePage"  data-equalizer>
-                        <div class="medium-9 columns" data-equalizer-watch>
-                            <div id="slideshow" flexy:if="rotatingImages">
+                    <div class="row clearfix hide-for-small-only" id="homeSlide" flexy:if="isHomePage"  data-equalizer>
+                        <div class="medium-9 columns">
+                            <div id="slideshow" flexy:if="rotatingImages" data-equalizer-watch>
+                                <img src="http://is0.gaslightmedia.com/cityofmi/rotatingImagesResized/is76-1406147945-35581.jpeg" id="testImg">
                                 {rotatingImages:h}
                             </div>
 
                         </div>
-                        <div class="medium-3 columns">
+                        <div class="medium-3 columns" id="eventHomeColumn">
                             <div id="homepage_events_wrapper" flexy:if="hasEvents" data-equalizer-watch>
                                 <div id="cEventMeetings">Meetings</div>
                                 <div id="cEventMore"><a href="{baseURLDefined:h}calendars-10/">Events</a></div>
@@ -82,13 +83,13 @@
                                     <?php $counter = 0; ?>
                                     <a flexy:foreach="events,v" href="{v[href]:h}" class="cEventItem">
                                         <?php $counter +=1;
-                                            if ($counter <=2) {
+                                            if ($counter <=4) {
                                         ?>
                                         <span class="cEventTitle">{v[header]}</span>
                                         <span class="cEventDate">{v[dates]}</span>
                                         <span class="cEventTimes" flexy:if="v[times]">{v[times]}</span>
                                         <!-- <span class="cEventCategory" flexy:if="v[cat]"><b>Category:</b> {v[cat]}</span> -->
-                                        <span class="cEventDescription" flexy:if="v[intro]">{v[intro]}</span>
+                                        <!-- <span class="cEventDescription" flexy:if="v[intro]">{v[intro]}</span> -->
                                         <!-- <span class="cEventLocation" flexy:if="v[loc]"><b>Location:</b>
                                             {if:v[loc][place]}
                                             {v[loc][place]},