Fix podcast title responsive layout on radio page

airtime_mvc/application/views/scripts/index/index.phtml

@@ -55,8 +55,14 @@
     <?php
     if ($this->displayRssTab) {?>
         <div id="tab-4" class="podcast tab_content">
-            <h2><?php echo $this->podcastTitle ?><a target="_blank" href="<?php echo $this->stationPodcastRssUrl ?>" class="rss_icon"><span>Subscribe </span><img src="css/radio-page/img/rss.png"></a></h2>
+            <div class="rss-title-wrapper">
-
+                <div id="rss-title">
+                    <?php echo $this->podcastTitle ?>
+                </div>
+                <div id="rss-subscribe">
+                    <a target="_blank" href="<?php echo $this->stationPodcastRssUrl ?>" class="rss_icon"><span>Subscribe </span><img src="css/radio-page/img/rss.png"></a>
+                </div>
+            </div>
 
             <div id="jquery_jplayer_1" class="jp-player">
             </div>

airtime_mvc/public/css/radio-page/radio-page.css

@@ -111,13 +111,6 @@ span.login-img {
     margin: 10px;
 }
 
-.podcast .rss_icon {
-    width: 200px;
-    position: absolute;
-    right: 40px;
-    text-align: right;
-
-}
 
 .podcast .rss_icon span {
     color: #fff;
@@ -134,7 +127,6 @@ span.login-img {
 
 
 .podcast .rss_icon img {
-    width: 40px;
     vertical-align: middle;
     margin-left: 10px;
 }
@@ -146,6 +138,42 @@ span.login-img {
 }
 
 
+
+.rss-title-wrapper {
+    overflow:hidden;
+}
+
+.rss-title-wrapper div {
+    padding: 10px;
+}
+#rss-title {
+    float:left;
+    width:60%;
+    text-align:right;
+    font-size: 28px;
+    font-weight: 300;
+}
+#rss-subscribe {
+    overflow:hidden;
+    text-align: right;
+}
+
+@media screen and (max-width: 490px) {
+    #rss-title {
+        float: none;
+        margin-right:0;
+        width:auto;
+        border:0;
+    }
+    #rss-title, #rss-subscribe {
+        text-align: center;
+    }
+}
+
+
+
+
+
 input[type="text"] {
     font-family: 'Roboto', sans-serif;
     color: #fff;