Neues Forum - responsive (Allgemein)
Um das Forum responsive zu machen, d. h. auch auf Smartphones benutzbar, habe ich folgende Ergänzungen vorgenommen:
1. main.tpl Zeile 12 hinzugefügt:
<meta name="viewport" content="width=device-width, initial-scale=1" />
2. style.min.css hinzugefügt (am Ende):
body{-webkit-text-size-adjust:none;}
input,textarea{font-size:1em;}
@media (max-device-width: 450px) {
.posting img {max-width:100%;height:auto;}
input {max-width: 82vw;}
textarea {margin-bottom:1em;max-width:85vw;}
input, textarea/*, #subnav .small*/{font-size:16px;}
#postingform #format-bar {margin: 0;}
#bbcode-bar {margin:0;width: auto;}
#bbcode-bar button{margin:5px;}
#smiley-bar {width: auto;}
#smiley-bar button {border:0;}
#postingform input.checkbox {margin-left: 0;}
ul.thread li span.tail {white-space: normal;}
code {font-size: .82em;}
code{border:1px dashed;padding:.5em;}
}
@media (max-device-width: 450px) and (orientation:portrait) {
body {padding: 5px;}
#logo {float:none;padding:0;text-align:center;}
#nav {text-align:left;}
#subnav {/*margin-bottom:5em;*/text-align:left !important;height:auto;}
#subnav-1 {float:none !important;padding-left:5px;}
#subnav-2 {text-align:left !important;float:none;}
#subnav #subnav-1 {padding-left:10px;}
#subnavmenu {display:inline-block;margin:0;}
#usermenu {margin:0;padding:0 0 1em 5px;line-height:2em;}
#topsearch {margin-left:5px;}
#content {padding:10px 5px;}
select {margin:0 0 10px 5px;}
img.avatar {max-width: 35%;height: auto;}
}
@media (max-device-width: 450px) and (orientation:landscape) {
#subnav {margin-bottom:1em;}
}
[size=large]Nachtrag 31.05.2015:[/size]
Das CSS für das Styling des Sourcecodes wird hier beschrieben.