FROM CACHE - de_header

Section CSS überschreiben

Section CSS überschreiben

Dirk7
Entdecker
15 1 0

Hallo,

 

die verschiedenen Abschnitte/Sections auf der Startseite haben einen Abstand zum darüber liegenden Abschnitt margin-top in dem Theme Craft. Diese kann ich leider nirgendwo mit eigenem CSS überschreiben.

 

Wo kann ich diesen CSS Wert margin-top des Themes ändern bzw. wie kann ich ihn überschreiben?

 

Das geladene CSS lautet

@media screen and (min-width: 750px) {
    .section+.section {
        margin-top: var(--spacing-sections-desktop);
    }
}

Der HTML code / die Section auf die sich das CSS bezieht lautet:

<section id="shopify-section-template--22870000959831__rich_text_qWLWe3" class="shopify-section section">

 

Besten Dank für einen Hinweis.

Dirk

1 ANTWORT 1

Gabe
Shopify Staff
18450 2891 4257

Hey @Dirk7 

 

Kennst du unsere Anleitung hier? Um das CSS zu überschreiben und den margin-top-Wert zu ändern, kannst du ein CSS einsetzen, wie:

 

@media screen and (min-width: 750px) {
    .shopify-section.section + .shopify-section.section {
        margin-top: 10px !important; /* Setze deinen gewünschten Wert */
    }
}

 

  • Das !important Schlüsselwort stellt sicher, dass dein benutzerdefiniertes CSS die vorhandenen CSS-Regeln überschreibt.
  • Wenn du mehrere spezifische Anpassungen vornehmen musst, kannst du verschiedene Selektoren und Werte hinzufügen.

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.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog