Contao Grid - Smaller Screens (Contao 2.9)
Es wurden 2 spezielle Anpassungen der CSS Definitionen eingebaut, die je nach Browserbreite aktiv werden. Als erstes für eine Auflösung <1024 Pixel, genauer gesagt mit einer Auflösung bis maximal 1023 Pixel, als zweites bis maximal 767 Pixel.
Diese speziellen Angaben habe ich im CSS Editor von Contao jeweils in 2 Feldern eingetragen, im Feld "Selektor" und im Feld "Eigener Code".
Screen mit maximal 1023 Pixel
Selektor:
@media only screen and (max-width: 1023px)
Eigener Code:
body {
font-size: 0.625em;
line-height: 1.3em;
}
Screen mit maximal 767 Pixel (Mobil)
Selektor:
@media handheld,only screen and (max-width: 767px)
Eigener Code:
body {
font-size: 16px;
-webkit-text-size-adjust: none;
}
body, #wrapper, #footer {
width: 100%;
min-width: 0;
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;
border: 0;
}
#footer {
font-size: 0.625em;
}
#container {
padding-left:2px;
padding-right:2px;
}
.g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8,.g9,.g10,.g11,.g12,.g13,.g14,.g15,.g16 {
width: auto;
float: none;
margin-left: 0px;
margin-right: 0px;
padding-left: 20px;
padding-right: 20px;
}