Warenkorb + Paypal Buttons in kompletter Seitenbreite auf Mobile anzeigen lassen?

Deutsch Diskussion Shopify Design
,
1

Hey, habe ein Problem. Ich möchte wie oben erwähnt meine Buttons auf kompletter Breite anzeigen lassen.

Ich nutze das Dawn Theme, habe versucht was am code von

.product__info-wrapper, .product-form, .product-form__buttons

zu ändern, selbst mit !important geht hier nichts. Bin bisschen am verzweifeln.

Die Buttons sind ja an den Containern begrenzt, jedoch finde ich keine Möglichkeit diese Begrenzung für die zwei Buttons aufzuheben.. Bin für jede Hilfe dankbar!

ps. meine Domain ist stunnyclothing.com, falls es irgendwie zur Lösung beiträgt.

2

Finde ich eigentlich gar nicht schlecht wie es jetzt ist:

image.png
image.png1501×1068 180 KB

Und yup, die Buttons sind wahrscheinlich in einem Container mit einer festen Breite oder einem Padding begrenzt. Sicherstellen, dass der Container keine Begrenzungen hat und die Buttons selbst auf width: 100%; eingestellt sind. ODer einen CSS wie:

.product-form__buttons {
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    width: 100%; 
    max-width: none; 
    padding: 0; 
    margin: 0 auto; 
    box-sizing: border-box;
}

.product-form__submit {
    width: 100%; 
    max-width: none; 
    box-sizing: border-box; 
}

.shopify-payment-button {
    display: block; 
    width: 100%; 
    max-width: none; 
    text-align: center; 
}

/* Optional: iframe für Zahlungsoptionen anpassen */
.shopify-payment-button iframe {
    width: 100% !important; 
    max-width: none !important; 
}

/* Mobile spezifische Anpassung */
@media screen and (max-width: 768px) {
    .product-form__buttons {
        padding: 10px; 
    }
}

PayPal-Buttons sind meistens in einem iframe eingebettet, und die Breite wird von der PayPal API beeinflusst. Wenn ja, probiere mal:

.shopify-payment-button {
    display: flex; 
    justify-content: center; 
    width: 100%; 
}

.shopify-payment-button iframe {
    width: 100% !important; 
    max-width: none !important; 
}
1 Like
3

die Idee mit

max-width: none !important;

ist sehr gut, keine Ahnung warum ich nicht darauf gekommen bin haha. Aber es funktioniert leider trotzdem nicht. Ich denke das zerschießt mir auch die css für den Desktop, da soll ja alles bleiben wie es ist, nur die Mobile Version sollte komplett angezeigt werden.

Bin leider kein Experte in dem Gebiet. Aber trotzdem danke!

1 Like