Contao Grid - Smaller Screens (Contao 2.10)
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.
Contao 2.10 unterstützt nun Media-Queries direkt. Im Feld "Media-Query" folgt nun die Angabe zur Steuerung, die CSS Angaben werden ganz normal im Editor dazu angelegt. Wird eine CSS Angabe nicht unterstützt, schreibt man diese in das Feld "Eigener Code".
Screen mit maximal 1023 Pixel
Media-Query:
only screen and (max-width: 1023px)
CSS Definitionen:
body {
font-size: 0.625em;
line-height: 1.3em;
}
Screen mit maximal 767 Pixel (Mobil)
Media-Query:
handheld,only screen and (max-width: 767px)
CSS Definitionen:
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;
}