forum: improve responsiveness for viewports < 500px (#75)

This commit is contained in:
Lephe 2021-07-07 19:23:24 +02:00
parent fe039e4092
commit 3876e3470e
Signed by untrusted user: Lephenixnoir
GPG Key ID: 1BBA026E13FC0495
5 changed files with 33 additions and 7 deletions

View File

@ -7,6 +7,17 @@ section {
margin: 20px auto 0 auto;
}
@media screen and (max-width: 1399px) {
section {
width: 90%;
}
}
@media screen and (max-width: 1199px) {
section {
width: 95%;
}
}
section h1 {
margin-top: 0;
border-bottom: 1px solid #d8d8d8;

View File

@ -103,7 +103,7 @@
margin: 5px 0;
}
@media all and (max-width: 500px) {
@media screen and (max-width: 499px) {
#light-menu, #spacer-menu {
height: 40px;
}
@ -161,7 +161,7 @@ header {
section {
width: unset;
margin: 16px;
margin: 12px;
}
.home-title {
padding: 10px;

View File

@ -13,10 +13,6 @@
#menu a {
font-size: 13px;
}
section {
width: 90%;
}
}
@media all and (min-width: 1400px) {

View File

@ -97,6 +97,7 @@ table.thread div.info {
float: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-left: 0;
}
table.thread div.info > *:not(:last-child):after {
@ -109,6 +110,11 @@ table.thread div.info {
overflow-wrap: anywhere;
}
}
@media screen and (max-width: 849px) {
table.thread td.author {
width: 104px;
}
}
/* Tables with filters */

View File

@ -72,12 +72,16 @@
@media screen and (max-width: 1199px) {
table.thread .profile {
flex-direction: column;
width: 128px;
width: 96px;
text-align: center;
}
table.thread .profile-avatar {
order: 1;
margin-right: 0;
margin-top: 4px;
width: 96px;
height: 96px;
}
table.thread .profile-title,
@ -90,6 +94,15 @@
display: inline;
}
}
@media screen and (max-width: 849px) {
table.thread .profile {
width: 96px;
}
table.thread .profile-avatar {
width: 64px;
height: 64px;
}
}
/* Trophies */
.trophies {