Optimizing mobile layout (missing files)

style/ugc.scss

@@ -43,16 +43,14 @@ select {
 	border:none;
 	background:transparent;
 	color:#666;
-	padding-right:1.5em;
-}
-
-select + .fa-down {
-	margin-left:-1em;
-	color:#666;	
 }
 
 /* Common Classes */
 
+.hide {
+	display:none;
+}
+
 .inline {
 	margin-right:0.5em;
 }
@@ -72,7 +70,7 @@ select + .fa-down {
 	padding:0.2em;
 }
 .button.no_bg {
-	background:inherit;
+	background:none;
 	color:#666;
 }
 .button.no_bg:hover, .button.no_bg.clicked {
@@ -185,9 +183,11 @@ main {
 
 .film {
 	position:relative;
+	display: inline-block;
 	background:white;
 	margin-bottom:1em;
 	overflow: hidden;
+	width:100%;
 	-webkit-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
 	-moz-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
 	box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
@@ -197,6 +197,10 @@ main {
 	
 }
 
+.film * {
+	transform: translate(0px, 0px);
+}
+
 .film img.bg {
 	position:absolute;
 	top:50%;
@@ -204,36 +208,41 @@ main {
 	left:$poster_size;
 	right:0;
 	bottom:0;
-	width:calc(100% - #{$poster_size});
 	opacity:0.2;
+	width:calc(100% - #{$poster_size});
+}
+
+.film .poster-container {
+	display: inline-block;
 }
 
 .film img.poster {
 	width:$poster_size;
-	display: block;
 	z-index:2;
+	vertical-align: top;
 }
 
 .film .info {
 	z-index:2;
-	position:absolute;
-	top:0;
-	left:$poster_size;
-	padding-left:1em;
-	width: calc(100% - 1em - #{$poster_size});
+	display: inline-block;
+	vertical-align:top;
+	padding:1em;
+	width: calc(100% - 2em - #{$poster_size});
 }
 
 .film p {
 	margin:0.5em 0;
 }
 
+.film .title {
+	margin-top:0;
+}
 .film .title a.name {
 	font-weight: bold;
 }
 
-.film .title .edito {
+.film .edito {
 	font-style: italic;
-	margin-left:1em;
 	color:#777;
 }