Du kannst ja statt dessen ein fluid responsive grid nehmen. Das von Contao ist halt mit fixen Breiten, ja.
Falls es jemanden interessiert: hier ein minimales fluid responsive grid System (in diesem Fall auch speziell für Contao), mit 2% gutter und einem breakpoint bei 768px:
PHP-Code:
/* clearfix */
.cf:after,
.inside:after,
.group:after {
content:"";
display:block;
clear:both;
}
/* default negative margin on .inside and .group */
.inside,
.group { margin:0 -1%; }
/* default margin on all elements within .inside and .group */
.inside > *,
.group > * { margin:0 1%; }
/* reset margin on .group within .inside */
.inside > .group { margin:0; }
/* default column */
*[class*='span'] {
position:relative;
float:left;
margin:0 1%;
width:98%;
min-height:0.01em;
}
/* grid widths */
.span1 { width: 6.3333%; }
.span2 { width:14.6666%; }
.span3 { width:23.0000%; }
.span4 { width:31.3333%; }
.span5 { width:39.6666%; }
.span6 { width:48.0000%; }
.span7 { width:56.3333%; }
.span8 { width:64.6666%; }
.span9 { width:73.0000%; }
.span10 { width:81.3333%; }
.span11 { width:89.6666%; }
.span12 { width:98.0000%; }
/* pushing */
.push1 { left: 8.3333%; }
.push2 { left:16.6666%; }
.push3 { left:25.0000%; }
.push4 { left:33.3333%; }
.push5 { left:41.6666%; }
.push6 { left:50.0000%; }
.push7 { left:58.3333%; }
.push8 { left:66.6666%; }
.push9 { left:75.0000%; }
.push10 { left:83.3333%; }
.push11 { left:91.6666%; }
/* pulling */
.pull1 { left: -8.3333%; }
.pull2 { left:-16.6666%; }
.pull3 { left:-25.0000%; }
.pull4 { left:-33.3333%; }
.pull5 { left:-41.6666%; }
.pull6 { left:-50.0000%; }
.pull7 { left:-58.3333%; }
.pull8 { left:-66.6666%; }
.pull9 { left:-75.0000%; }
.pull10 { left:-83.3333%; }
.pull11 { left:-91.6666%; }
/* manual clearing */
.cl { clear:left; }
.cr { clear:right; }
.cb { clear:both; }
/* centered column */
*[class*='span'].center {
margin:0 auto;
clear:both;
float:none;
}
/* responsive */
@media only screen and (max-width:768px) {
/* reset default negative margin on .inside and .group */
.inside,
.group { margin:0; }
/* reset default margin on all elements within .inside and .group */
.inside > *,
.group > * { margin:0; }
/* expand columns to 100% width */
*[class*='span'] {
float:none;
width:auto;
left:0;
}
}
Damit kann man Contao Artikeln direkt span* Klassen geben und damit zu Spalten machen, ohne weitere Wrapper. Natürlich kann man auch Content Elementen die span* Klassen geben, sie müssen nur auf irgend eine Weise von .group gewrapped sein (bspw. kann man dem Artikel die Klasse group geben, falls der Artikel selbst keine Spalte ist, oder man benutzt die [
semantic_html5] Extension). Gleiches gilt für den Einsatz im fe_page Template.
