Updated CSS to adopt better to mobile screens

This commit is contained in:
Taichi Kato 2020-06-01 12:30:23 +08:00
parent 7b989b6c1d
commit 37b9035433

27
public/css/chat.css vendored
View File

@ -111,7 +111,9 @@ a {
#wrapper {
display: flex;
flex-direction: column;
/* flex: 1 1 20em; */
/* flex-basis: 30%; */
flex-direction: row;
align-items: center;
flex-wrap: wrap;
justify-content: center;
@ -122,8 +124,8 @@ a {
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 65%;
max-height: 100%;
width: 100%;
max-height: 90vh;
max-width: 100%;
}
@ -146,7 +148,7 @@ a {
}
#remote-video:first-child:nth-last-child(1) {
/* -or- li:only-child { */
max-height: 80vh;
width: 80vw;
}
/* two items */
@ -415,7 +417,22 @@ button:hover {
margin: 0;
line-height: 2rem;
}
#wrapper {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
justify-content: center;
padding: 0;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, calc(-50% - 3rem));
max-height: 90%;
max-width: 100%;
}
#remote-video {
/* width: 75vw;
height: calc((16/9) * 75vw); */