Fabio/tileserver-gl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Responsive CSS for the web page - fixes (closes #33)

Browse source
This commit is contained in:
Dalibor Janák 2016-07-27 17:56:54 +02:00
parent b048990e14
commit 4fc76251c3
1 changed files with 25 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
public/resources/index.css
View file

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