Mehrere CSS-Klassen kombinieren - Background 100% - Inhalt aber mit Mindestbreite - möglich?

Shopware 5 Themes & Design
1

 

Hallo Zusammen :slight_smile:

meine Einkaufsfläche ist auf vollflächig eingestellt. Mein Plan ist, dass ich z.B. bei einem Text-Element den Hintergrund farbig gestalte über die gesamte Seitenbreite, den Text dagegen aber auf eine Breite von z.B. 1400px beschränke.

Jetzt habe ich in der emotions.less Datei zwei Klassen angelegt.

Einmal für den Hintergrund:

.dunkelblau .panel.has–border {
    background: #2a4a71;
    width: 100%;
}

 

Einmal für die Breite:

.box-center .panel.has–border {
    width: 1400px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

 

Beide Klassen habe ich in den Element eingetragen, aber das Resultat ist nur die Breite von 1400px in der Hintergrundfarbe - rechts und links ist der Hintergrund trotzdem weiss.

Kennt hier jemand das Problem? Oder weiß jemand wie ich meinen Plan eventuell anders umsetzen könnte?

 

2

Ohne Code oder Link schwer zu beantworten. Mit einem weiteren verschachtelten Element wäre es problemlos möglich, ob du das hast geht aber nicht aus der Frage hervor.

Gruß

Matt

3

 

Hallo Matt,

leider kein ich keinen direkten Link senden, da der Shop nicht öffentlich ist, sprich nur über die IP seh ich was ich mache. Aber reichen dir eventuell diese beiden Screenshots?

Einmal dieses Bild: so sieht das ganze dann unverändert aus:

 

Wenn ich bei diesen kompletten Element aber “background: #…;” ergänze funktioniert es…  auf den Foto wie ich es meine:

Allerdings fehlen unter den ganzen Elementen meine zwei Klassen, aber im HTML code sind sie erwähnt…?

 

 

4

Warum deine Klassen nicht im CSS sind kann diverse Gründe haben (Cache, less nicht inkudiert etc.), das sollten wir gesondert klären. 

Dein eigentliches Problem kannst du doch lösen, indem du 

.dunkelblau {
    background-color: #2a4a71;
    .panel.has--border {
         width: 1400px;
         margin: 0 auto;
         text-align: center;
    }
}

nur dem inneren panel-Container eine Breite gibst. Damit bleibt .dunkelblau bei 100%.

Gruß

Matt

1 „Gefällt mir“
5

 

Vielen Dank Matt :slight_smile:

es funktioniert! Eigentlich ja ganz simpel wenn man so nachdenkt… aber wie sagt man so, manchmal sieht man den Wald vor lauter Bäumen nicht! :smiley:

 

Ich musste allerdings den „background“ noch ein zweites Mal ergänzen:

.dunkelblau {
    background-color: #2a4a71;
    .panel.has--border {
         background: #2a4a71;
         width: 1400px;
         margin: 0 auto;
         text-align: center;
    }
}

Auf jeden Fall vielen lieben Dank für deine Hilfe!!!

LG