Marvin Kellermann |
Rocksolid Columns: Spaltenabstand entfernen
Für ein Kundenprojekt benötigte ich die Möglichkeit die Rocksolid Columns (im Theme Tao / Oneo) so anzupassen, dass die Spalten keine Abstände besitzen. Dafür habe ich das margin-right auf 0px gesetzt und lassen die width des Grids neu berechnen.
Um ein paar Byte und Platz zu sparen, kannst du natürlich die Definitionen von large, medium und small zusammensetzen, da sie auf allen Geräten nun dieselbe Breite erhalten. An der stelle habe darauf verzichtet, damit diese Vorlage flexibel bleibt und auch für andere Zwecke umgebaut werden kann.
CSS Datei einbinden, um Spaltenabstände zu verhindern
So kannst du die CSS-Datei einbinden:
- Kopiere meinen Code
- Lade ihn in den Editor deiner Wahl und speichere die Datei als noGapColumn.css
Alternativ: erstelle direkt eine CSS-Datei in deiner Contao Instanz - Lade die Datei in die Dateiverwaltung deiner Contao Instanz
- Binde die Datei unter Themes » Seitenlayouts » Externe Stylesheets ein
- Füge in den Spaltenumschlag (Umschlag Anfang) Elementen, die CSS-Klasse noGap ein
- CWE abonnieren 😏
/* large */
.noGap .rs-column {
margin-right: 0px ;
}
.noGap .rs-column.-large-col-2-1,
.tao-no-sidebar .noGap .rs-column.-large-col-2-1,
.page-footer .noGap .rs-column.-large-col-2-1 {
width: calc(100% / 2) ;
}
.noGap .rs-column.-large-col-3-1,
.tao-no-sidebar .noGap .rs-column.-large-col-3-1,
.page-footer .noGap .rs-column.-large-col-3-1 {
width: calc(100% / 3) ;
}
.noGap .rs-column.-large-col-3-2,
.tao-no-sidebar .noGap .rs-column.-large-col-3-2,
.page-footer .noGap .rs-column.-large-col-3-2 {
width: calc(100% / 3 * 2) ;
}
.noGap .rs-column.-large-col-4-1,
.tao-no-sidebar .noGap .rs-column.-large-col-4-1,
.page-footer .noGap .rs-column.-large-col-4-1 {
width: calc(100% / 4) ;
}
.noGap .rs-column.-large-col-4-2,
.tao-no-sidebar .noGap .rs-column.-large-col-4-2,
.page-footer .noGap .rs-column.-large-col-4-2 {
width: calc(100% / 4 * 2) ;
}
.noGap .rs-column.-large-col-4-3,
.tao-no-sidebar .noGap .rs-column.-large-col-4-3,
.page-footer .noGap .rs-column.-large-col-4-3 {
width: calc(100% / 4 * 3) ;
}
.noGap .rs-column.-large-col-5-1,
.tao-no-sidebar .noGap .rs-column.-large-col-5-1,
.page-footer .noGap .rs-column.-large-col-5-1 {
width: calc(100% / 5 * 1) ;
}
.noGap .rs-column.-large-col-5-2,
.tao-no-sidebar .noGap .rs-column.-large-col-5-2,
.page-footer .noGap .rs-column.-large-col-5-2 {
width: calc(100% / 5 * 2) ;
}
.noGap .rs-column.-large-col-5-3,
.tao-no-sidebar .noGap .rs-column.-large-col-5-3,
.page-footer .noGap .rs-column.-large-col-5-3 {
width: calc(100% / 5 * 3) ;
}
.noGap .rs-column.-large-col-5-4,
.tao-no-sidebar .noGap .rs-column.-large-col-5-4,
.page-footer .noGap .rs-column.-large-col-5-4 {
width: calc(100% / 5 * 4) ;
}
.noGap .rs-column.-large-col-6-1,
.tao-no-sidebar .noGap .rs-column.-large-col-6-1,
.page-footer .noGap .rs-column.-large-col-6-1 {
width: calc(100% / 6 * 1) ;
}
.noGap .rs-column.-large-col-6-2,
.tao-no-sidebar .noGap .rs-column.-large-col-6-2,
.page-footer .noGap .rs-column.-large-col-6-2 {
width: calc(100% / 6 * 2) ;
}
.noGap .rs-column.-large-col-6-3,
.tao-no-sidebar .noGap .rs-column.-large-col-6-3,
.page-footer .noGap .rs-column.-large-col-6-3 {
width: calc(100% / 6 * 3) ;
}
.noGap .rs-column.-large-col-6-4,
.tao-no-sidebar .noGap .rs-column.-large-col-6-4,
.page-footer .noGap .rs-column.-large-col-6-4 {
width: calc(100% / 6 * 4) ;
}
.noGap .rs-column.-large-col-6-5,
.tao-no-sidebar .noGap .rs-column.-large-col-6-5,
.page-footer .noGap .rs-column.-large-col-6-5 {
width: calc(100% / 6 * 5) ;
}
.noGap .rs-column.-large-col-7-1,
.tao-no-sidebar .noGap .rs-column.-large-col-7-1,
.page-footer .noGap .rs-column.-large-col-7-1 {
width: calc(100% / 7) ;
}
.noGap .rs-column.-large-col-7-2,
.tao-no-sidebar .noGap .rs-column.-large-col-7-2,
.page-footer .noGap .rs-column.-large-col-7-2 {
width: calc(100% / 7 * 2) ;
}
.noGap .rs-column.-large-col-7-3,
.tao-no-sidebar .noGap .rs-column.-large-col-7-3,
.page-footer .noGap .rs-column.-large-col-7-3 {
width: calc(100% / 7 * 3) ;
}
.noGap .rs-column.-large-col-7-4,
.tao-no-sidebar .noGap .rs-column.-large-col-7-4,
.page-footer .noGap .rs-column.-large-col-7-4 {
width: calc(100% / 7 * 4) ;
}
.noGap .rs-column.-large-col-7-5,
.tao-no-sidebar .noGap .rs-column.-large-col-7-5,
.page-footer .noGap .rs-column.-large-col-7-5 {
width: calc(100% / 7 * 5) ;
}
.noGap .rs-column.-large-col-7-6,
.tao-no-sidebar .noGap .rs-column.-large-col-7-6,
.page-footer .noGap .rs-column.-large-col-7-6 {
width: calc(100% / 7 * 6) ;
}
/* medium */
@media screen and (max-width: 900px) {
.noGap .rs-column.-medium-col-1-1,
.tao-no-sidebar .noGap .rs-column.-medium-col-1-1,
.page-footer .noGap .rs-column.-medium-col-1-1 {
width: 100% ;
}
.noGap .rs-column.-medium-col-2-1,
.tao-no-sidebar .noGap .rs-column.-medium-col-2-1,
.page-footer .noGap .rs-column.-medium-col-2-1 {
width: calc(100% / 2) ;
}
.noGap .rs-column.-medium-col-2-2,
.tao-no-sidebar .noGap .rs-column.-medium-col-2-2,
.page-footer .noGap .rs-column.-medium-col-2-2 {
width: 100% ;
}
.noGap .rs-column.-medium-col-3-1,
.tao-no-sidebar .noGap .rs-column.-medium-col-3-1,
.page-footer .noGap .rs-column.-medium-col-3-1 {
width: calc(100% / 3) ;
}
.noGap .rs-column.-medium-col-3-2,
.tao-no-sidebar .noGap .rs-column.-medium-col-3-2,
.page-footer .noGap .rs-column.-medium-col-3-2 {
width: calc(100% / 3 * 2) ;
}
.noGap .rs-column.-medium-col-3-3,
.tao-no-sidebar .noGap .rs-column.-medium-col-3-3,
.page-footer .noGap .rs-column.-medium-col-3-3 {
width: 100% ;
}
.noGap .rs-column.-medium-col-4-1,
.tao-no-sidebar .noGap .rs-column.-medium-col-4-1,
.page-footer .noGap .rs-column.-medium-col-4-1 {
width: calc(100% / 4) ;
}
.noGap .rs-column.-medium-col-4-2,
.tao-no-sidebar .noGap .rs-column.-medium-col-4-2,
.page-footer .noGap .rs-column.-medium-col-4-2 {
width: calc(100% / 4 * 2) ;
}
.noGap .rs-column.-medium-col-4-3,
.tao-no-sidebar .noGap .rs-column.-medium-col-4-3,
.page-footer .noGap .rs-column.-medium-col-4-3 {
width: calc(100% / 4 * 3) ;
}
.noGap .rs-column.-medium-col-4-4,
.tao-no-sidebar .noGap .rs-column.-medium-col-4-4,
.page-footer .noGap .rs-column.-medium-col-4-4 {
width: 100% ;
}
.noGap .rs-column.-medium-col-5-1,
.tao-no-sidebar .noGap .rs-column.-medium-col-5-1,
.page-footer .noGap .rs-column.-medium-col-5-1 {
width: calc(100% / 5 * 1) ;
}
.noGap .rs-column.-medium-col-5-2,
.tao-no-sidebar .noGap .rs-column.-medium-col-5-2,
.page-footer .noGap .rs-column.-medium-col-5-2 {
width: calc(100% / 5 * 2) ;
}
.noGap .rs-column.-medium-col-5-3,
.tao-no-sidebar .noGap .rs-column.-medium-col-5-3,
.page-footer .noGap .rs-column.-medium-col-5-3 {
width: 57.5%;
}
.noGap .rs-column.-medium-col-5-4,
.tao-no-sidebar .noGap .rs-column.-medium-col-5-4,
.page-footer .noGap .rs-column.-medium-col-5-4 {
width: calc(100% / 5 * 4) ;
}
.noGap .rs-column.-medium-col-5-5,
.tao-no-sidebar .noGap .rs-column.-medium-col-5-5,
.page-footer .noGap .rs-column.-medium-col-5-5 {
width: 100% ;
}
.noGap .rs-column.-medium-col-6-1,
.tao-no-sidebar .noGap .rs-column.-medium-col-6-1,
.page-footer .noGap .rs-column.-medium-col-6-1 {
width: calc(100% / 6 * 1) ;
}
.noGap .rs-column.-medium-col-6-2,
.tao-no-sidebar .noGap .rs-column.-medium-col-6-2,
.page-footer .noGap .rs-column.-medium-col-6-2 {
width: calc(100% / 6 * 2) ;
}
.noGap .rs-column.-medium-col-6-3,
.tao-no-sidebar .noGap .rs-column.-medium-col-6-3,
.page-footer .noGap .rs-column.-medium-col-6-3 {
width: calc(100% / 6 * 3) ;
}
.noGap .rs-column.-medium-col-6-4,
.tao-no-sidebar .noGap .rs-column.-medium-col-6-4,
.page-footer .noGap .rs-column.-medium-col-6-4 {
width: calc(100% / 6 * 4) ;
}
.noGap .rs-column.-medium-col-6-5,
.tao-no-sidebar .noGap .rs-column.-medium-col-6-5,
.page-footer .noGap .rs-column.-medium-col-6-5 {
width: calc(100% / 6 * 5) ;
}
.noGap .rs-column.-medium-col-6-6,
.tao-no-sidebar .noGap .rs-column.-medium-col-6-6,
.page-footer .noGap .rs-column.-medium-col-6-6 {
width: 100% ;
}
.noGap .rs-column.-medium-col-7-1,
.tao-no-sidebar .noGap .rs-column.-medium-col-7-1,
.page-footer .noGap .rs-column.-medium-col-7-1 {
width: calc(100% / 7) ;
}
.noGap .rs-column.-medium-col-7-2,
.tao-no-sidebar .noGap .rs-column.-medium-col-7-2,
.page-footer .noGap .rs-column.-medium-col-7-2 {
width: calc(100% / 7 * 2) ;
}
.noGap .rs-column.-medium-col-7-3,
.tao-no-sidebar .noGap .rs-column.-medium-col-7-3,
.page-footer .noGap .rs-column.-medium-col-7-3 {
width: calc(100% / 7 * 3) ;
}
.noGap .rs-column.-medium-col-7-4,
.tao-no-sidebar .noGap .rs-column.-medium-col-7-4,
.page-footer .noGap .rs-column.-medium-col-7-4 {
width: calc(100% / 7 * 4) ;
}
.noGap .rs-column.-medium-col-7-5,
.tao-no-sidebar .noGap .rs-column.-medium-col-7-5,
.page-footer .noGap .rs-column.-medium-col-7-5 {
width: calc(100% / 7 * 5) ;
}
.noGap .rs-column.-medium-col-7-6,
.tao-no-sidebar .noGap .rs-column.-medium-col-7-6,
.page-footer .noGap .rs-column.-medium-col-7-6 {
width: calc(100% / 7 * 6) ;
}
.noGap .rs-column.-medium-col-7-7,
.tao-no-sidebar .noGap .rs-column.-medium-col-7-7,
.page-footer .noGap .rs-column.-medium-col-7-7 {
width: 100% ;
}
}
/* small */
@media screen and (max-width: 599px) {
.noGap .rs-column.-small-col-1-1,
.tao-no-sidebar .noGap .rs-column.-small-col-1-1,
.page-footer .noGap .rs-column.-small-col-1-1 {
width: 100% ;
}
.noGap .rs-column.-small-col-2-1,
.tao-no-sidebar .noGap .rs-column.-small-col-2-1,
.page-footer .noGap .rs-column.-small-col-2-1 {
width: calc(100% / 2) ;
}
.noGap .rs-column.-small-col-2-2,
.tao-no-sidebar .noGap .rs-column.-small-col-2-2,
.page-footer .noGap .rs-column.-small-col-2-2 {
width: 100% ;
}
.noGap .rs-column.-small-col-3-1,
.tao-no-sidebar .noGap .rs-column.-small-col-3-1,
.page-footer .noGap .rs-column.-small-col-3-1 {
width: calc(100% / 3) ;
}
.noGap .rs-column.-small-col-3-2,
.tao-no-sidebar .noGap .rs-column.-small-col-3-2,
.page-footer .noGap .rs-column.-small-col-3-2 {
width: calc(100% / 3 * 2) ;
}
.noGap .rs-column.-small-col-3-3,
.tao-no-sidebar .noGap .rs-column.-small-col-3-3,
.page-footer .noGap .rs-column.-small-col-3-3 {
width: 100% ;
}
.noGap .rs-column.-small-col-4-1,
.tao-no-sidebar .noGap .rs-column.-small-col-4-1,
.page-footer .noGap .rs-column.-small-col-4-1 {
width: calc(100% / 4) ;
}
.noGap .rs-column.-small-col-4-2,
.tao-no-sidebar .noGap .rs-column.-small-col-4-2,
.page-footer .noGap .rs-column.-small-col-4-2 {
width: calc(100% / 4 * 2) ;
}
.noGap .rs-column.-small-col-4-3,
.tao-no-sidebar .noGap .rs-column.-small-col-4-3,
.page-footer .noGap .rs-column.-small-col-4-3 {
width: calc(100% / 4 * 3) ;
}
.noGap .rs-column.-small-col-4-4,
.tao-no-sidebar .noGap .rs-column.-small-col-4-4,
.page-footer .noGap .rs-column.-small-col-4-4 {
width: 100% ;
}
.noGap .rs-column.-small-col-5-1,
.tao-no-sidebar .noGap .rs-column.-small-col-5-1,
.page-footer .noGap .rs-column.-small-col-5-1 {
width: calc(100% / 5 * 1) ;
}
.noGap .rs-column.-small-col-5-2,
.tao-no-sidebar .noGap .rs-column.-small-col-5-2,
.page-footer .noGap .rs-column.-small-col-5-2 {
width: calc(100% / 5 * 2) ;
}
.noGap .rs-column.-small-col-5-3,
.tao-no-sidebar .noGap .rs-column.-small-col-5-3,
.page-footer .noGap .rs-column.-small-col-5-3 {
width: 57.5%;
}
.noGap .rs-column.-small-col-5-4,
.tao-no-sidebar .noGap .rs-column.-small-col-5-4,
.page-footer .noGap .rs-column.-small-col-5-4 {
width: calc(100% / 5 * 4) ;
}
.noGap .rs-column.-small-col-5-5,
.tao-no-sidebar .noGap .rs-column.-small-col-5-5,
.page-footer .noGap .rs-column.-small-col-5-5 {
width: 100% ;
}
.noGap .rs-column.-small-col-6-1,
.tao-no-sidebar .noGap .rs-column.-small-col-6-1,
.page-footer .noGap .rs-column.-small-col-6-1 {
width: calc(100% / 6 * 1) ;
}
.noGap .rs-column.-small-col-6-2,
.tao-no-sidebar .noGap .rs-column.-small-col-6-2,
.page-footer .noGap .rs-column.-small-col-6-2 {
width: calc(100% / 6 * 2) ;
}
.noGap .rs-column.-small-col-6-3,
.tao-no-sidebar .noGap .rs-column.-small-col-6-3,
.page-footer .noGap .rs-column.-small-col-6-3 {
width: calc(100% / 6 * 3) ;
}
.noGap .rs-column.-small-col-6-4,
.tao-no-sidebar .noGap .rs-column.-small-col-6-4,
.page-footer .noGap .rs-column.-small-col-6-4 {
width: calc(100% / 6 * 4) ;
}
.noGap .rs-column.-small-col-6-5,
.tao-no-sidebar .noGap .rs-column.-small-col-6-5,
.page-footer .noGap .rs-column.-small-col-6-5 {
width: calc(100% / 6 * 5) ;
}
.noGap .rs-column.-small-col-6-6,
.tao-no-sidebar .noGap .rs-column.-small-col-6-6,
.page-footer .noGap .rs-column.-small-col-6-6 {
width: 100% ;
}
.noGap .rs-column.-small-col-7-1,
.tao-no-sidebar .noGap .rs-column.-small-col-7-1,
.page-footer .noGap .rs-column.-small-col-7-1 {
width: calc(100% / 7) ;
}
.noGap .rs-column.-small-col-7-2,
.tao-no-sidebar .noGap .rs-column.-small-col-7-2,
.page-footer .noGap .rs-column.-small-col-7-2 {
width: calc(100% / 7 * 2) ;
}
.noGap .rs-column.-small-col-7-3,
.tao-no-sidebar .noGap .rs-column.-small-col-7-3,
.page-footer .noGap .rs-column.-small-col-7-3 {
width: calc(100% / 7 * 3) ;
}
.noGap .rs-column.-small-col-7-4,
.tao-no-sidebar .noGap .rs-column.-small-col-7-4,
.page-footer .noGap .rs-column.-small-col-7-4 {
width: calc(100% / 7 * 4) ;
}
.noGap .rs-column.-small-col-7-5,
.tao-no-sidebar .noGap .rs-column.-small-col-7-5,
.page-footer .noGap .rs-column.-small-col-7-5 {
width: calc(100% / 7 * 5) ;
}
.noGap .rs-column.-small-col-7-6,
.tao-no-sidebar .noGap .rs-column.-small-col-7-6,
.page-footer .noGap .rs-column.-small-col-7-6 {
width: calc(100% / 7 * 6) ;
}
.noGap .rs-column.-small-col-7-7,
.tao-no-sidebar .noGap .rs-column.-small-col-7-7,
.page-footer .noGap .rs-column.-small-col-7-7 {
width: 100% ;
}
}
Ich beschäftige mich seit Contao 3 mit dem CMS. Auf meinem Blog und auf YouTube findest du einige kostenlose Beiträge und Videos. Gerne unterstütze ich dich bei deinen Projekten, schau gern auf meiner Agentur-Website vorbei.
Du benötigst Unterstützung bei deiner Contao-Instanz?
