adjust responsiveness of news and episode list

diff --git a/panikweb_templates/static/css/_specifics.scss b/panikweb_templates/static/css/_specifics.scss
index e72e74a112778bdca24642744409b020ed7d8b28..66ba36561823362d8f5c79be765c6ed872474e7b 100644 (file)
--- a/panikweb_templates/static/css/_specifics.scss
+++ b/panikweb_templates/static/css/_specifics.scss
@@ -324,6 +324,7 @@ body{
 #mainHeader {
        padding-bottom:1em;
        display: inline-block;
+       height: 100px;
 }
 #Player {
        display: inline-block;
@@ -2126,6 +2127,15 @@ div#actu {
                font-size: 22px;
                max-width: 50ex;
        }
+       @media screen and (max-width: 760px) {
+               display: block;
+               > h2 {
+                       text-align: center;
+               }
+               > h2, > div {
+                       width: auto;
+               }
+       }
 }
 
 div.emission-detail {
@@ -2157,6 +2167,11 @@ div.emission-detail {
                        font-size: 110%;
                }
        }
+       div.emission-info {
+               @media screen and (max-width: 760px) {
+                       width: 100%;
+               }
+       }
        div.episode-info {
                position: relative;
                width: 50%;
@@ -2189,6 +2204,9 @@ div.emission-detail {
 div.emission-episodes {
        width: 50%;
        background: $yellow;
+       @media screen and (max-width: 760px) {
+               width: 100%;
+       }
        ul, li {
                margin: 0;
                padding: 0;
@@ -2198,6 +2216,10 @@ div.emission-episodes {
                position: relative;
                height: 12.5vw;
                width: 25%;
+               @media screen and (max-width: 760px) {
+                       height: 50vw;
+                       width: 50%;
+               }
                display: inline-block;
                float: left;
                div.image {