Trennlinien Fußleiste entfernen

[BlackBird030]

Hallo,

kann mir jemand verraten wie ich diese Trennlinien entfernen kann, so dass es aussieht als wäre die Fußleiste ein schöner Container? Der Bild-Banner darüber hat zum angrenzenden Element keine Trennlinie. (better-naps.de)

[Gabe]

Hey @BlackBird030 

Es kann sein das diese Trennlinie Browser-bedingt ist aber um die Trennlinien im Footer-Bereich deines Shopify Dawn-Themes zu entfernen, musst du CSS verwenden, um die entsprechenden Stile anzupassen oder zu überschreiben. Die Linien könnten durch Border-Eigenschaften oder Pseudo-Elemente (:before, :after) erzeugt werden. Um genauere Anweisungen zu geben, benötige ich Details zu den spezifischen Trennlinien. Wenn es jedoch eine direkte Border-Eigenschaft ist, kannst du sie mit CSS entfernen. Probiere mal diesen CSS-Code, um die Borders im Footer zu entfernen:

.footer__content-top, .footer__content-bottom {
  border: none;
}

.footer__content-top .footer-block, .footer__content-bottom-wrapper {
  border: none;
}

.footer__content-bottom-wrapper .footer__column {
  border: none;
}

Dieser CSS Code hat in meinem Dawn Footer gefunzt und nimmt an, dass die Trennlinien als Border-Eigenschaften gesetzt sind. Wenn die Trennlinien anders erzeugt werden, zum Beispiel über Pseudo-Elemente oder Hintergrundbilder, musst du den spezifischen CSS-Code identifizieren, der sie erzeugt, und diesen überschreiben.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[BlackBird030]

Die Trennlinie in der Mitte konnte so beseitigt werden, leider nicht die obige zum Bild-Banner. Liegt es vielleicht an dem obigen Container? Ich nutze refresh

[Gabe]

Hey @BlackBird030 

Das ::after Pseudo-Element in deinem Code mit opacity: 0.0; scheint keinen sichtbaren Inhalt zu haben, der eine Trennlinie verursachen würde. Es könnte jedoch sein, dass die Trennlinie von einem anderen Element erzeugt wird oder durch vorhergehende oder nachfolgende Sektionen im Layout deiner Seite.

Hier sind ein paar allgemeine Schritte, die du durchführen kannst:

1. Untersuche die Seite im Browser mit Entwicklerwerkzeugen (Rechtsklick auf die Seite und "Untersuchen" oder F12 drücken), um herauszufinden, welches Element die Trennlinie erzeugt.

2. Suche nach CSS-Eigenschaften wie border, outline, box-shadow, oder nach einem Pseudo-Element ::before oder ::after, das für die Linie verantwortlich sein könnte.

3. Wenn du das Element gefunden hast, das die Linie erzeugt, füge dem entsprechenden CSS-Selektor border: none !important;, outline: none !important; oder box-shadow: none !important; hinzu, je nachdem, was zutrifft.

Hier ist ein allgemeines Beispiel, wie der CSS-Code aussehen könnte, um eine mögliche Trennlinie zu entfernen:

.banner__content, .banner__content::after, .banner__content::before,
.section::after, .section::before {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

Oh und Vorsicht:

Wenn das ein Video im benutzerdefinierten Liquid Abschnitt sein soll dann haben wir das Thema schon oft hier besprochen.

Hoffe das hilft dir weiter! Und noch ein schönes W-Ende! 😉