Design ist bei I-Pad/Tablet Version verschoben

[Kathi97]

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. 

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

[Gabe · Accepted solution]

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 

[Kathi97]

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