Abstand Zwischen Blöcken - Shopify 2.0

[mrserious]

Hallo,

ich habe zu meiner Produktseite zwei "benutzerdefiniertes Liquid" eingefügt. Nun haben diese beiden Blöcke einen großen Abstand. Wie bekomme ich diese beiden aneinander? 

Danke vorab für jede Hilfe!

[mrserious]

Folgend auch mal die Formel für die beiden Liquids. Vielleicht kann man ja hier Irgendwas machen, um den Abstand zu entfernen:

<small><small><small>

<div class="product__accordion accordion quick-add-hidden">

  <details id="Details">

    <summary>

      <div class="summary__title">

        <img class="icon icon-accordion color-foreground-text" src="Link hochgeladenes Icon">

        <h2 class="h4 accordion__title">

          <span><small><small><strong>Textüberschrift</small></small></strong></span>

        </h2>

      </div>

      {% render 'icon-caret' %}

    </summary>

    <div class=

<p> „Text“ </p>

    </div>

  </details>

</div>

</small></small></small>

[Gabe]

Hey @mrserious 

Danke für das Foto und den Code. Um welches Theme handelt es sich und wo habt ihr das Code her?

Dazu wäre auch interessant zu wissen warum ihr die Theme-nativen "Collapsible Tabs" nicht verwendet (anstatt dem benutzerdefinierten Liquid Blocks) wo es keine Lücken zu sehen gibt? Wäre das nicht eine einfachere Alternative?

Es gibt Gründe, warum es einen Abstand zwischen den beiden benutzerdefinierten Blöcken geben könnte, wie z. B. dein CSS ist für das Element oder die umgebenden Elemente definiert, die Abstände (Margins oder Paddings) hinzufügen. Es könnten auch leere HTML-Elemente oder zusätzliche Zeilen zwischen den Liquid-Blöcken sein, die zum Abstand beitragen.

Stelle sicher, dass es keine leeren Zeilen oder zusätzliche Zeichen zwischen den beiden Liquid-Blöcken gibt. Oder die Paddings mithilfe von CSS verringern wie mit einem CSS-Code wie den folgenden:

.product__accordion {
   margin: 0;
   padding: 0;
}

Beispiel in deinem Code: die Tags <small> wurden in deinem Code dreimal verschachtelt verwendet. Das <small>-Tag wird typischerweise dazu verwendet, den Text kleiner darzustellen. Wenn es nicht notwendig ist, den Text so klein darzustellen, könntest du einige oder alle dieser Tags entfernen. Du könntest auch nur einen <small>-Tag verwenden, wenn die dreifache Verschachtelung nicht beabsichtigt war.

[mrserious]

Wenn ich die "Collapsible Taps" verwende, bekomme ich meinen Text nicht formiert und kann die Icons nicht schlecht bestimmen.

Wenn ich den Margin Code verwende, bekomme ich zwar die Blöcke aneinander, allerdings wird mein Logo dann rießig...

[Gabe]

@mrserious 

Super, somit sind wir einen Schritt weiter. Es scheint, dass der CSS-Code auch andere Elemente innerhalb der .product__accordion Klasse beeinflusst. Du könntest dem Logo eine eigene Klasse geben und die Stile für diese spezifische Klasse überschreiben. Füge dem Logo eine neue Klasse hinzu. Zum Beispiel:

<img class="icon icon-accordion color-foreground-text logo-class" src="Link hochgeladenes Icon">

Nun definiere die Größe für das Logo über diese neue Klasse, um sicherzustellen, dass es nicht beeinflusst wird: 

.logo-class {
    width: [gewünschte Breite, z.B. 100px oder 50%];
    height: auto; /* Damit das Bildverhältnis erhalten bleibt */
}

Wenn du den Abstand nur zwischen den benutzerdefinierten Liquid-Blöcken und nicht für das gesamte .product__accordion Element reduzieren möchtest, könntest du das Ziel spezifizieren, indem du einen direkten Nachkommen-Selektor oder eine spezifischere Klasse verwendest.

Zum Beispiel, den Abstand nur zwischen <details> Elementen innerhalb der .product__accordion Klasse reduzieren, wie:

.product__accordion > details {
    margin: 0;
    padding: 0;
}

[mrserious]

Könntest du es mir einmal in die oben geschriebene Formel einsetzen, so wie es gemeint ist.

Leider bin ich noch ein ziemlicher Anfänger...

Du würdest mir sehr helfen, Danke! 🙂

[Gabe]

Hey @mrserious 

Ich bin hier nur der Community Moderator und gebe somit hier in der Community nur Tipps ab die dazu dienen euch in die richtige Richtung zu weisen.

Du wirst somit einen Experten finden müssen der kostenpflichtig in deinen Admin hineinsteigen kann (was wir hier nicht machen können) und den findest du entweder in unserem Englischen Design Forum hier (bitte alles auf Englisch beschreiben samt Bilder) oder in unserer deutschen und privaten FB Gruppe hier. 

Stelle deine Frage und es wird sich jemand melden! 😉

[mrserious]

Ich werde mich durchprobieren. Danke! 🙂

[mrserious]

Ein Schritt weiter. Allerdings hat sich jetzt das Logo verabschiedet...

<small><small>
<div class="product__accordion
{
margin: 0;
padding: 0;
}accordion quick-add-hidden">
<details id="Details">
<summary>
<div class="summary__title">
<img class="icon icon-accordion color-foreground-text logo-class"logo-class logo-class
{
width: 100px;
height: auto;
}src="https://cdn.shopify.com/s/files/1/0768/6986/1716/files/box.png?v=1692168587">
<h2 class="h4 accordion__title">
<span><small><small><strong>Versand & Rücksendungen</small></small></strong></span>
</h2>
</div>
{% render 'icon-caret' %}
</summary>
<div class="accordion__content rte" id=
<p><strong><strong><strong>Lieferzeit:</strong></strong></strong><br>
- Deutschlandweiter Versand mit DHL <br>
- Du erhältst deine Bestellung innerhalb von 4-7 Werktagen nach Bestelleingang</p>
<p><strong><strong><strong>Versandkosten: </strong></strong></strong> <br>
Deutschland: 4,90€ <br>
Über 99€ Bestellwert: Kostenloser Versand</p>
<p><strong><strong><strong>Rücksendung: </strong></strong></strong><br>
- Kostenfreie Rücksendung<br>
- 14 Tage Rückgaberecht</p> </div>
</details>
</div>
</small></small>

[Gabe · Accepted solution]

Hey @mrserious 

Es scheint du versuchst das CSS direkt in das HTML zu integrieren, was das Problem verursacht. In HTML kann man nicht direkt CSS in die Klasse oder Attribut eines Elements einfügen. Stattdessen den CSS separat (entweder im Headerbereich des Doks, oder in der externen CSS-Datei) definieren. Hier der HTML Liquid:

<small><small>
<div class="product__accordion accordion quick-add-hidden">
   <details id="Details">
       <summary>
           <div class="summary__title">
               <img class="icon icon-accordion color-foreground-text logo-class" src="https://cdn.shopify.com/s/files/1/0768/6986/1716/files/box.png?v=1692168587">
               <h2 class="h4 accordion__title">
                   <span><small><small><strong>Versand & Rücksendungen</small></small></strong></span>
               </h2>
           </div>
           {% render 'icon-caret' %}
       </summary>
       <div class="accordion__content rte" id="accordion-content">
           <p><strong><strong><strong>Lieferzeit:</strong></strong></strong><br>
               - Deutschlandweiter Versand mit DHL <br>
               - Du erhältst deine Bestellung innerhalb von 4-7 Werktagen nach Bestelleingang</p>
           <p><strong><strong><strong>Versandkosten: </strong></strong></strong> <br>
               Deutschland: 4,90€ <br>
               Über 99€ Bestellwert: Kostenloser Versand</p>
           <p><strong><strong><strong>Rücksendung: </strong></strong></strong><br>
               - Kostenfreie Rücksendung<br>
               - 14 Tage Rückgaberecht</p> 
       </div>
   </details>
</div>
</small></small>

Dann den CSS in der Style Datei einfügen:

.product__accordion {
   margin: 0;
   padding: 0;
}

.logo-class {
   width: 100px;
   height: auto;
}

Den obigen CSS-Code also in der main CSS-Datei (z.B. base.css).

[mrserious]

Nach Stunden endlich hinbekommen. Danke!!! 🤗

[Gabe]