Verwendung: Rechte Spalte lässt sich in der Breite nicht anpassen

Bernhard's Avatar

Bernhard

12 Mar, 2018 11:26 AM

Produkt: Open Sauce Contao
Contao-Version: 4.4.16

Hallo!
ich versuche unter Contao 4.4.16 die rechte Spalte über den Layout-Eintrag 'Breite rechte Spalte' einzustellen.
In meinem Fall soll die Hauptspalte 75% und die rechte Spalte 25% der Bildschirmansicht einnehmen.
Egal welchen Wert ich einstelle, es verändert sich nichts.
Was mach ich falsch bzw. wo ist noch zu 'drehen'?

  1. Support Staff 1 Posted by RockSolid Theme... on 12 Mar, 2018 12:58 PM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    RockSolid Themes verwenden das Contao-CSS-Framework nicht, deshalb hat die Einstellung der Breite der rechten Spalte in den Layouteinstellungen keine Auswirkung.

    Sie können die Breiten anpassen indem Sie folgenden CSS-Code in die Datei files/opensauce/css/custom.css einfügen:

    .sidebar {
        width: 25%;
    }
    .main-content {
        width: 64.14286%;
    }
    @media screen and (max-width: 900px) {
        .sidebar {
            width: auto;
        }
        .main-content {
            width: auto;
        }
    }
    
  2. 2 Posted by Bernhard Teppan on 12 Mar, 2018 02:44 PM

    Bernhard Teppan's Avatar

    Vielen Dank für die rasche Antwort!
    Eine Verständnisfrage noch:
    Warum wird der .main-content mit einer width: 64.14286% angegeben?
    Was ist, wenn ich die .sidebar mit width: 20% erfasse wie ist dann der Wert für den .main-content?
    Danke 

  3. Support Staff 3 Posted by RockSolid Theme... on 13 Mar, 2018 08:04 AM

    RockSolid Themes's Avatar

    Das Design des Open Sauce Themes basiert auf einem 28-Spalten Grid. Das ergibt eine Breite von 3.57143% pro Gridspalte. Der .main-content Bereich und die .sidebar haben rechts, links und zwischen den beiden jeweils eine Gridspalte Abstand somit bleiben 89.28571% an Breite übrig die auf die beiden Bereiche aufgeteilt werden können.

    Was ist, wenn ich die .sidebar mit width: 20% erfasse wie ist dann der Wert für den .main-content?

    Die Berechnung dafür lautet somit:
    89.28571% - 20% = 69.28571%

  4. 4 Posted by Bernhard Teppan on 13 Mar, 2018 12:05 PM

    Bernhard Teppan's Avatar

    Vielen Dank - jetzt kenn ich mich aus!

  5. 5 Posted by Bernhard Teppa on 05 Apr, 2018 11:06 AM

    Bernhard Teppa's Avatar

    Ich hab nun noch ein Problem und bitte um Ihre Unterstützung!
    Ich verwende in der Hauptspalte 'Boxen'. Sobald ich mehr als 2 Spalten entsteht am rechten 'Rand' ein zusätzlicher 'Bereich' der daurch eine 'Zentrierung' der Boxen-Inhalte (in meinem Fall Bilder) unmöglich macht.
    In meinem Fall werden auf der Startseite 5 Bilder dargestellt, wobei je 2 in den ersten beiden Reihen und noch 1 Bild in der 3. Reihe dargestellt wird.
    Dasin der 3. Reihe ist schön zentriert, die 4 in den ersten beiden Reihen sind nach links gerückt.
    (Siehe Beilage)

  6. Support Staff 6 Posted by RockSolid Theme... on 06 Apr, 2018 06:34 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Wir konnten den Fehler nicht reproduzieren. Haben Sie den CSS-Code für die Boxen verändert?

    Damit wir Ihnen zielgerichteter weiterhelfen können, schicken Sie uns bitte einen Link zur betroffenen Seite.

  7. 7 Posted by Bernhard Teppan on 06 Apr, 2018 09:10 AM

    Bernhard Teppan's Avatar

    Ich hatte folgenden Eintrag in der 'custom.css' für einen anderen Bereich der Website:

    .rs-column {
        margin: 0;
    }
    

    Ohne diese Anpassung passt es nun so wie ich es haben möchte.
    Danke für den entscheidenden Hinweis! ;-)

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Already uploaded files

  • rechtespalte.JPG 17.7 KB

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac