From 4fc76251c369865e36089ec403a1c9c451e58e20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dalibor=20Jan=C3=A1k?= <dalibor.janak@gmail.com>
Date: Wed, 27 Jul 2016 17:56:54 +0200
Subject: [PATCH] Responsive CSS for the web page - fixes (closes #33)

---
 public/resources/index.css | 42 +++++++++++++++++++++++---------------
 1 file changed, 25 insertions(+), 17 deletions(-)

diff --git a/public/resources/index.css b/public/resources/index.css
index 57f0b3e..133e29e 100644
--- a/public/resources/index.css
+++ b/public/resources/index.css
@@ -62,8 +62,7 @@ section{
 }
 .item{
   background:#fff;
-  height: 148px;
-  padding: 20px 30px 20px 188px;
+  height: 191px;
   border: 1px solid #ededed;
   border-top:none;
 }
@@ -72,14 +71,16 @@ section{
 }
 .item img{
   position: absolute;
-  margin: 10px 10px 15px -158px;
+  margin: 30px;
   width: 128px;
   height: 128px;
   border: 1px solid #ccc;
 }
 .details {
   float:left;
-  width: 50%;
+  width:180px;
+  height: 128px;
+  padding: 20px 30px 20px 188px;
 }
 .details h3 {
   font-size:18px;
@@ -92,16 +93,18 @@ section{
 .viewers {
   float:right;
   text-align:center;
-  width:120px;
-  margin-top:25px;
+  width: 120px;
+  margin-top: 25px;
+  padding-right: 30px;
 }
 .btn {
   display:block;
-  margin:5px;
+  margin: 0;
+  line-height: 36px;
 }
 .btn:first-child {
   position: relative;
-  padding: 10px 0;
+  padding: 0;
   overflow: hidden;
   border-radius:4px;
   background-color: #499DCE;
@@ -163,7 +166,7 @@ body {
     padding: 2%;
   }
 }
-@media (max-width: 550px) {
+@media (max-width: 600px) {
   .title{
     margin: 25px 0 0 0;
   }
@@ -176,17 +179,22 @@ body {
   }
   .item{
     height: 245px;
-    padding: 205px 30px 30px 30px;
   }
-  .item img{
-    width: 192px;
-    height: 192px;
-    margin: -185px 0 0 0;
-  }
-  .details,.viewers{
+  .viewers{
+    float: left;
+    text-align: left;
     width: 100%;
+    margin-left: 30px;
+    margin-top: 15px;
   }
   .viewers a{
-    width: 120px;
+    display: inline-block;
+    vertical-align: middle;
+  }
+  .btn{
+    margin: 0 20px 0 0;
+  }
+  .btn:first-child{
+    padding: 0 20px;
   }
 }
\ No newline at end of file