FROM CACHE - de_header
Gelöst

Design ist bei I-Pad/Tablet Version verschoben

Kathi97
Tourist
6 0 1

Hallo zusammen,

ich habe meine Website mit dem Theme "Showcase" gemacht. Am Desktop und Handy passen die Designelemente alle.

Dagegen ist bei der "IPad-Version" (768x1024) einiges verschoben oder abgeschnitten. 

Kathi97_0-1623841969039.png

Die Website-Sektion: https://sons-of-aloha.com/

Hier hat sich zum Beispiel der Button nach unten verschoben. Ich bin leider noch Anfänger in Sachen "html" und "css", habe aber trotzdem durch die Shopify-Community schon einige Dinge im Code selbst anpassen können. Hierzu habe ich jedoch nichts gefunden, daher weiß ich leider nicht wie ich die Sache am besten angehen soll. 

Hat einer von euch vielleicht eine Idee? 🙂

Vielen Dank + liebe Grüße!

Kathi

1 AKZEPTIERTE LÖSUNG

Gabe
Shopify Staff
16357 2587 3853

Erfolg.

Hi Kathi! @Kathi97 

Danke für die URL und da das Problem nur auf Responsive UI passiert wird das eine angepasste Coding Programmierung verlangen.

Ein Code Beispiel wäre der folgende (bitte jegliche Code Anpassungen immer zuerst in einer Testumgebung testen bevor man es im Live Theme implementiert). Das folgende ohne Gewähr: Passe einfach den folgenden Code an je nach deinem Theme und die Gegebenheiten und füge es am Ende der Datei assets/theme.scss.liquid ein (aber bitte mit einem Programmierer machen):

@media screen and (min-width: 769px) {
.template-product form#addToCartForm-product-template { position: relative; }
.template-product .trigger-pop-up { position: absolute; top: 22px; left: 250px; width: auto !important; }
}

Schnell Fix?

Ein Schnell Fix wäre es die Produkte Beschreibung 2in1 Trolley & Backpack KANE zu kürzen bis der Zeilenumbruch verschwindet.

Siehe mein eigenes Testing wo ich das Problem deiner 3 call-to-action Buttons reproduzieren konnte hier:

Anonsten empfehle ich einen Experten und Shopify Partner - taskhusky.com 

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

Lösung in ursprünglichem Beitrag anzeigen

2 ANTWORTEN 2

Gabe
Shopify Staff
16357 2587 3853

Erfolg.

Hi Kathi! @Kathi97 

Danke für die URL und da das Problem nur auf Responsive UI passiert wird das eine angepasste Coding Programmierung verlangen.

Ein Code Beispiel wäre der folgende (bitte jegliche Code Anpassungen immer zuerst in einer Testumgebung testen bevor man es im Live Theme implementiert). Das folgende ohne Gewähr: Passe einfach den folgenden Code an je nach deinem Theme und die Gegebenheiten und füge es am Ende der Datei assets/theme.scss.liquid ein (aber bitte mit einem Programmierer machen):

@media screen and (min-width: 769px) {
.template-product form#addToCartForm-product-template { position: relative; }
.template-product .trigger-pop-up { position: absolute; top: 22px; left: 250px; width: auto !important; }
}

Schnell Fix?

Ein Schnell Fix wäre es die Produkte Beschreibung 2in1 Trolley & Backpack KANE zu kürzen bis der Zeilenumbruch verschwindet.

Siehe mein eigenes Testing wo ich das Problem deiner 3 call-to-action Buttons reproduzieren konnte hier:

Anonsten empfehle ich einen Experten und Shopify Partner - taskhusky.com 

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

Kathi97
Tourist
6 0 1

Hi Gabe!

Vielen lieben Dank für die ausführliche Hilfe! 🙂

Werde das jetzt mal bei einer Kopie von der Seite ausprobieren. 

Liebe Grüße,

Kathi