Avatar

Neues Forum - responsive (Allgemein)

Fritz ⌂ @, Donnerstag, 30.05.2019, 13:16 (vor 234 Tagen) @ Fritz
bearbeitet von Fritz, Sonntag, 02.06.2019, 13:44

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;}
}

Nachtrag 31.05.2015:
Das CSS für das Styling des Sourcecodes wird hier beschrieben.


gesamter Thread:

 

powered by my little forum