style: adjust fo mobile

diff --git a/panikweb_esperanzah/static/css/style.scss b/panikweb_esperanzah/static/css/style.scss
index 3c323621aaa16259c10c80bdde3c5ad7528b6065..816207bfdad636a803fadff64a9a1caae5637555 100644 (file)
--- a/panikweb_esperanzah/static/css/style.scss
+++ b/panikweb_esperanzah/static/css/style.scss
@@ -36,6 +36,10 @@ $secondary: $orange;
        font-style: normal;
 }
 
+* {
+       box-sizing: border-box;
+}
+
 body {
        font-family: Cervo, sans-serif;
        line-height: normal;
@@ -609,14 +613,14 @@ button.check:before, a.check:before {
 
 #Main{
        margin: 0 auto;
-       padding: 0 1em;
+       padding: 0 1rem;
        width: 96%;
        flex-grow: 1;
        position: relative;
        z-index: 10;
        @media screen and (max-width: $size_m) {
                z-index: 1;
-               width: auto;
+               width: 100%;
        }
 }
 #Main >.wrapper{
@@ -1354,7 +1358,6 @@ div.topikcellcontent a {
        display: inline-block;
        text-align: left;
        width: 50%;
-       box-sizing: border-box;
        padding-right: 2em;
        float: left;
 }
@@ -1497,39 +1500,38 @@ body#embed {
 }
 
 img {
-       box-sizing: border-box;
        transition: all ease 0.5s;
 }
 
 div.emission-tile {
        position: relative;
-       box-sizing: border-box;
        width: 24vw;
        padding-bottom: 20px;
        float: left;
-       height: 26vw;
+       height: 27vw;
        overflow: hidden;
-       @media screen and (max-width: $size_s) {
-               width: 96vw;
-               height: 96vw;
-               float: none;
-       }
+       margin-bottom: 2em;
        @media screen and (max-width: $size_m) {
                width: 46vw;
                height: 46vw;
        }
+       @media screen and (max-width: $size_s) {
+               width: 96vw;
+               height: 100vw;
+               float: none;
+       }
        div.image {
                border: none;
                height: 23vw;
                width: calc(100% - 20px);
                text-align: center;
                @extend %image-bordure;
-               @media screen and (max-width: $size_s) {
-                       height: 90vw;
-               }
                @media screen and (max-width: $size_m) {
                        height: 40vw;
                }
+               @media screen and (max-width: $size_s) {
+                       height: 90vw;
+               }
        }
        div.name {
                margin-top: 10px;
@@ -1723,7 +1725,6 @@ div.emission-detail {
                        }
                }
                padding-top: 2rem;
-               box-sizing: border-box;
                div.emission-text {
                        @extend %text;
                        a {
@@ -1797,7 +1798,6 @@ div.emission-episodes {
        }
        a {
                height: 310px;
-               box-sizing: border-box;
                position: relative;
                width: 240px;
                margin-right: 10px;