Rocksolid-columns Abstand ändern

Hallo,

ich habe eine Frage zum Rocksolid columns: An sich funktioniert alles super. Ich habe momentan zwei Spalten nebeneinander und mobile dann nur eine.
Nun möchte ich aber den Abstand zwischen den beiden Spalten verändern. Für die Desktop-Version habe ich es auch mittels CSS hinbekommen:

HTML-Code:

---

.rs-column {margin-right: 2%;}
.rs-column.-large-col-2-1 {width: 49%}
.rs-column.-large-last {margin-right: -5px;}

---

Bei der Mobil-Version habe ich jetzt aber das Problem, dass die Spalten weiterhin 49% Breite haben.

In der Dokumtentation ist leider nichts dazu beschrieben. Ich hoffe Ihr könnt mir weiterhelfen.

Im Voraus vielen Dank,
Fonticola

Es wäre schön wenn man in den Einstellungen den Abstand Global festlegen könnte und das ganze nicht mehr CSS override lösen müsste.


Gesendet von meinem iPhone mit Tapatalk

Hab das selbe Problem. Die Spaltenaufteilung klappt problemlos, aber die margin-right muss ich über manuellen Weg anpassen, damit es wie gewünscht passt. Hier fehlt eine globale Einstellmöglichkeit.

Derzeit ist es nicht möglich die Abstände der Spalten über das Backend einzustellen.

Wir empfehlen folgende Vorgehensweise:

1. Eine Kopie der Datei /system/modules/rocksolid-columns/assets/css/columns.css im files-Ordner speichern.
2. Die Abstände und Breiten wie gewünscht in der kopierten CSS-Datei anpassen.
3. In den Seitenlayout-Einstellungen unter RockSolid Columns "Spalten-Stylesheet laden" deaktivieren.
4. In den Seitenlayout-Einstellungen die kopierte CSS-Datei unter "Zusätzliche Stylesheets" hinzufügen.

Wer mit Sass arbeitet kann die Datei /system/modules/rocksolid-columns/assets/sass/columns.sass kopieren.

Zitat:

---

Zitat von RockSolid Themes

Derzeit ist es nicht möglich die Abstände der Spalten über das Backend einzustellen.

Wir empfehlen folgende Vorgehensweise:

1. Eine Kopie der Datei /system/modules/rocksolid-columns/assets/css/columns.css im files-Ordner speichern.
2. Die Abstände und Breiten wie gewünscht in der kopierten CSS-Datei anpassen.
3. In den Seitenlayout-Einstellungen unter RockSolid Columns "Spalten-Stylesheet laden" deaktivieren.
4. In den Seitenlayout-Einstellungen die kopierte CSS-Datei unter "Zusätzliche Stylesheets" hinzufügen.

Wer mit Sass arbeitet kann die Datei /system/modules/rocksolid-columns/assets/sass/columns.sass kopieren.

---

Was ist mit SCSS? Würde gerne die Columns in Euer SCSS File (Swissy) mit aufnehmen um die COL Struktur einzuhalten, habe schon versucht die Daten mit einem Converter zu übertragen, jedoch befinden sich am Start der SASS Datei im Modul-Ordner Berechnungen, die der Converter irgendwie nicht akzeptiert.

EDIT* Und zurück zu CSS will ich eigentlich gar nicht! ;-)

Die Datei columns.sass kann mit dem Kommandozeilenbefehl sass-convert konvertiert werden:

Code:

---

sass-convert --from sass --to scss --indent t pfad/zu/columns.sass pfad/zu/columns.scss

---

Hier das Ergebnis: pastebin.com/cyaPbXJx

noch nicht getestet aber trotzdem DANKE DANKE DANKE! für die schnelle Antwort.

Wie lassen sich die Spaltenhöhen angleichen, wenn zwei oder mehr Spalten nebeneinander angezeigt werden?

Erstmal ein großes Lob an die Entwickler!

Sehr gelungene Extension, meine Frage ist jetzt nur, wie schaffe ich es bei zwei oder mehreren Textspalten das
die Texte in gleicher Höhe ausgerichtet sind (so wie im DTP "Ausrichtung am Grundlinienraster")?

Kann ich das nur über die Anpassungen der einzelnen Spalten per CSS machen?

Schonmal ein herzliches Danke für Eure Antworten.


Gruß, Stefan.

Ich habe mir jetzt die CSS Datei kopiert...weiss aber nicht so ganz wo ich den Abstand ändern kann. Korekt geht es um die grünen Boxen unter reinigungsdienste-muenchen.de

Kann mir jemand auf die Sprünge helfen? Wenn ich den Abstand bei .rs_column verringere muss ich ja die Breite erhöhen.

VG Frank

Die Abstände stellst du hier ein:

• https://github.com/madeyourday/conta...lumns.sass#L14
• https://github.com/madeyourday/conta...lumns.sass#L29
• https://github.com/madeyourday/conta...lumns.sass#L48

By default sind sie auf 1 / 13, also 0.07692…, also 7.6923…% gestellt. Willst du die Abstände auf zB 2% ändern, dann änderst du den Wert einfach auf 0.02

Danke Mr. Contao.-Allwissend :-)

Zitat:

---

Zitat von Spooky

Die Abstände stellst du hier ein:

• https://github.com/madeyourday/conta...lumns.sass#L14
• https://github.com/madeyourday/conta...lumns.sass#L29
• https://github.com/madeyourday/conta...lumns.sass#L48

By default sind sie auf 1 / 13, also 0.07692…, also 7.6923…% gestellt. Willst du die Abstände auf zB 2% ändern, dann änderst du den Wert einfach auf 0.02

---

Egal was ich da eintrage es ändert sich nichts an den Abständen.

nun gehts

das ist super

Zitat:

---

Zitat von Spooky

Die Abstände stellst du hier ein:

• https://github.com/madeyourday/conta...lumns.sass#L14
• https://github.com/madeyourday/conta...lumns.sass#L29
• https://github.com/madeyourday/conta...lumns.sass#L48

By default sind sie auf 1 / 13, also 0.07692…, also 7.6923…% gestellt. Willst du die Abstände auf zB 2% ändern, dann änderst du den Wert einfach auf 0.02

---

Wenn ich die Werte heruntersetze geht das bei mir nur mittels !important. Das größere Problem ist bei mir, dass rechts dann eine Lücke entsteht. Muss ich hier einfach die 7.6...% bei der Weite draufrechnen?

Ich habe jetzt die SCSS Datei eingebunden. Da kann ich mit display:none in .rs-column auch ohne weiteres das Element unsichtbar machen, doch eine Änderung von $gutter-width: 1 / 100; auf 50 oder wie ich es benötige auf 0 bringt leider keine Veränderung mit sich. Wie muss ich die colums.scss anpassen, damit der Abstand nicht mehr gezeigt wird? Am Besten ohne !important sonst habe ich das Problem, dass bei kleinem Viewport die anderen Regeln nicht greifen.


Vielen Dank!!!
Senchua

EDIT: Ich habe nun mit Hilfe dieses Threads http://help.rocksolidthemes.com/disc...spaltenabstand über SCSS den Spaltenabstand konfiguriert.
Was irgendwie nirgends erklärt wird ist die Sache mit Flexbox und dem Grid. Hat jemand das schonmal gemacht?

Hallo,

was muss ich in der Hauptdatei ändern, wenn ich die Abstände und Größen in Pixel haben möchte?

Für jeden Rat wäre ich dankbar.

Probier mal mit .beispiel {width: calc(50% - 10px); margin-right: 10px;}