Tabellen bündig machen

[deemon86]

Moin zusammen,

wie oder wo kann ich diese Abschnitte bündig machen?

Den dropdowns und den grünen Button genauso breit wie den gelben Button.

Theme: Dawn

Danke!

[Kai]

Hi @deemon86,

vielen Dank für deine Frage. Wir helfen dir gerne dabei einen Weg zu finden dein Dawn Theme so wie erwünscht anzupassen.

Könntest du dazu bitte den Link zu deinem Shopify Shop hier mit uns teilen? Dann können wir das ganze einmal testen.

Mit jedem bezahlten Shopify Plan bekommst du außerdem 60 Minuten Designtime, wenn du eins unserer Shopify Themes verwendest, was in deinem Shop mit Dawn der Fall ist.

Um diese in Gebrauch zu nehmen. 

Würdest du uns eine E-Mail schicken mit:

• Einer kurzen Erläuterung der Problematik / Designanfrage und warum du die Änderung vornehmen möchtest.
• Screenshots / Bildschirmaufnahmen des Problems / der Designanfrage.
• Links zu den betroffenen Seiten in deinem Shop.

Meine Kollegen würden dir daraufhin in 24-48 Stunden antworten und deine Anfrage an unsere Themedesigner weiterleiten, um abzuklären, ob die Änderungen so vorgenommen werden können, bevor diese dann mit der Arbeit anfangen, was in etwa 24-72 Stunden passiert.

Freue mich auf deine Antwort mit dem Link zu deinem Shop,

[deemon86]

Hey Kai, danke für deine Antwort!

Link zu meinem Shop: fromhamburg.de

Passwort: rturao

Das Problem ist, dass der gelbe "in den Warenkorb" Button nicht automatisch an das jeweilige Medium angepasst wird. Bedeutet, dass auf anderen Smartphones, PC und Tablett es entweder kürzer oder länger angezeigt wird. 

Ziel: "In den Warenkorb"- Button soll sich automatisch an die Fentsergröße anpassen, sodass es gleich lang ist wie die dropdowns unter ihm. 

Gruß Dieter

[Gabe]

Hey @deemon86 

Danke für den Link und diese Breiten sind leider nur teilweise Responsive was das ganze verkompliziert. Da der "In den Warenkorb"-Button nicht responsive ist und eine feste Breite hat, musst du eine feste Breite in Pixel oder eine relative Einheit wie Prozent verwenden, die sich auf die Containerbreite bezieht, damit die anderen Elemente sich dynamisch anpassen.

Das zeige ich hier was ich damit meine:

Um sicherzustellen, dass die "collapsible tab dropdowns" (für Produktbeschreibung, Material, Versand & Retoure, und Größentabelle) und der "Deinen Freunden zeigen!" Button die gleiche Breite wie der "In den Warenkorb" Button haben, musst du CSS verwenden. Das Ziel ist es, eine konsistente Breite über alle diese Elemente zu erzwingen, die entweder einer festen Breite oder einem Prozentsatz der Containerbreite entspricht, abhängig davon, wie der "In den Warenkorb" Button implementiert ist.

Schritte zur Anpassung der Breite:

Feste Breite (nicht responsive):

• Bestimme die Breite des "In den Warenkorb" Buttons. Wenn diese festgelegt ist (z.B. width: 300px;), kannst du dieselbe Breiteneinstellung auf die anderen Elemente anwenden.
• Beispiel CSS:

.collapsible-tab, .show-friends-button {
    width: 300px; /* Ersetze 300px durch die tatsächliche Breite des "In den Warenkorb" Buttons */
}

Responsive (Prozentuale Breite):

• Wenn der "In den Warenkorb" Button eine prozentuale Breite relativ zum Elternelement hat (z.B. width: 100%;), stelle sicher, dass alle Elemente, die du anpassen möchtest, im selben Container sind oder dass ihre Elternelemente dieselbe Breite haben.
• Beispiel CSS:

.collapsible-tab, .show-friends-button {
    width: 100%; /* Oder ein anderer Prozentsatz, abhängig von der Implementierung */
}

Anwendung von CSS:

• Du kannst das CSS entweder direkt in deine HTML-Datei innerhalb von <style> Tags einfügen oder in eine separate CSS-Datei, die in deiner HTML-Datei verlinkt ist.
• Es ist wichtig, dass du die korrekten Klassen- oder ID-Selektoren für die Elemente verwendest, die du anpassen möchtest. Die Namen .collapsible-tab und .show-friends-button sind nur Platzhalter und müssen durch die tatsächlichen Klassen oder IDs ersetzt werden.

ODER 

1. Definiere die Breite des "In den Warenkorb"-Buttons: Wenn der Button bereits eine Klasse oder ID hat, die seine Breite festlegt, kannst du diese als Referenz nutzen. Angenommen, der Button hat eine Klasse product-form__submit, könntest du im CSS nachsehen, wie die Breite definiert ist.

2. Wende die gleiche Breite auf die anderen Elemente an: Für die collapsible tabs und den "Deinen Freunden zeigen!" Button müsstest du eine ähnliche Breite anwenden. Wenn die Breite des "In den Warenkorb"-Buttons dynamisch oder responsive ist, könntest du überlegen, eine maximale Breite (max-width) zu setzen, die für alle Geräte funktioniert, und diese dann auf die anderen Elemente anzuwenden.

Ein CSS-Beispiel könnte folgendermaßen aussehen, wenn du die Breite auf 100% des Containers für alle Elemente setzen möchtest:

.product__info-container, .product__accordion, .share-button, .product-form__submit {
    width: 100%; /* oder max-width: XYZpx; für eine feste Breite */
}

Dabei ersetzt du .product__info-container, .product__accordion, und .share-button durch die tatsächlichen Klassen oder IDs der Elemente, die du anpassen möchtest.

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.

[deemon86]

Hallo Gabe, danke für deine Antwort!

Schau mal bitte, laut meinem Screenshot stimmt etwas mit dem In den Warenkorb-Button nicht. Wenn ich jetzt Share-Button und das Accordian-Menü verkleinere, dann müsste ich auch die oberen Tabellen verkleinern, also eigentlich die ganze Produkt-Seite, was wiederum links mehr Abstand zum Rand ergeben würde, als rechts. Die  komplette Produktseite wäre dann nicht mehr mittig, wenn ich das richtig verstehe.

In den Warenkorn-Button und die Tabellen sind alle  auf 100%. Wenn ich da, egal wo, was verändere, dann ist es auf meinem Smartphone nicht mehr 

bündig. 

In den Warenkorb-Button müsste 120% sein, damit er genauso lang ist, wie die anderen Tabellen, jedoch wie gesagt ist er dann auf meinem Smartphone  zu lang. Ich finde, es aber auch nicht normal, wenn etwas mehr als 100% ist oder?

Ich verstehe nicht warum Shopify den Button so kurz gemacht hat und alles andere länger. Ich frage mich auch, ob es nur bei mir  so ist? Müsste ja bei den anderen auch so sein.

Gruß Dieter

[Gabe]

Hey @deemon86 

Der gelbe ATC Button ist eigentlich ein externer Button der von den Digital Wallets gesteuert wird (alles dazu kannst du hier nachlesen) und ist deswegen beschränkt in der Breite. Siehe hier was ich meine:

Alle von Shopify Themes erstellten Buttons sind responsive, nur bei diesem Button gibt gibt es deswegen Einschränkungen.

Wenn du eine responsive Lösung suchst, könntest du Breiten in Prozent verwenden und sicherstellen, dass sie innerhalb desselben Containers liegen, der die maximale Breite beschränkt. Dies hält sie gleich breit, unabhängig von der Bildschirmgröße:

.product__accordion, .product-form__buttons {
    width: 100%; /* oder eine spezifische Prozentzahl, abhängig von deinem Layout */
}

Wenn die Elemente in verschiedenen Containern liegen oder wenn du Schwierigkeiten hast, sie bündig zu bekommen, könnte es erforderlich sein, spezifischere Selektoren zu verwenden oder das Layout deiner Seite zu überprüfen, um sicherzustellen, dass es konsistent ist und die gewünschten Styling-Regeln unterstützt.

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