Recaptcha auf mobil abgeschnitten zu sehen

[CaroK]

Schönen guten Tag,

wir haben das Problem, dass Kunden bei ihrem Login auf mobil das Recaptcha Bild nicht ganz sehen können. Siehe hier:

 

Hat jemand vielleicht eine Idee woran das liegen kann?

[Gabe]

Hey @CaroK 

Danke für die Fragen und bei so einem Fall wäre ein befristeter Vorschaulink oder Link zu einem Beispiel sehr hilfreich das schneller zu analysieren. Welche reCAPTCHA vX ist das denn? Einige Nutzer haben berichtet, dass der Wechsel von reCAPTCHA v2 zu v3 das Problem gelöst hat. reCAPTCHA v3 funktioniert ohne Benutzerinteraktion und könnte eine saubere Lösung sein, wenn v2 Probleme auf mobilen Geräten verursacht.

Das Problem, dass das reCAPTCHA auf mobilen Geräten abgeschnitten wird, kann mehrere Ursachen haben. Hier sind einige Schritte und Lösungen, die du ausprobieren kannst, um das Problem zu beheben:

CSS-Anpassungen:

• Manchmal kann das reCAPTCHA-Widget aufgrund von CSS-Einschränkungen oder dem Layout abgeschnitten werden. Du kannst versuchen, das CSS anzupassen, um das Problem zu beheben. Zum Beispiel:

#recaptcha_widget_div iframe {
    transform: scale(0.9);  /* Passt die Größe an */
    transform-origin: 0 0;  /* Verhindert, dass das Widget abgeschnitten wird */
}

Wenn du das reCAPTCHA-Widget in einem iFrame einbettest, kannst du sicherstellen, dass der iFrame korrekt dimensioniert ist:

<iframe src="https://www.google.com/recaptcha/api/fallback?k=deine-seitenschlüssel" width="100%" height="430" frameborder="0" scrolling="no"></iframe>

Stelle auch sicher, dass das reCAPTCHA-Widget vollständig sichtbar ist und der Benutzer scrollen kann, wenn es nötig ist. Dies kann durch Anpassungen am Container und an den Elternelementen erreicht werden:

.recaptcha-container {
    overflow: auto;
}

Es wurde auch berichtet, dass reCAPTCHA-Widgets oft Probleme auf mobilen Geräten haben, besonders wenn sie in responsive oder dynamische Layouts eingebettet sind. Die oben genannten Anpassungen sollten helfen, aber es kann notwendig sein, verschiedene Ansätze zu testen, um die beste Lösung für deine spezifische Situation zu finden​ (GitHub)​​ (community.hubspot.com)​​ (Jotform Community)​​ (Jotform)​.

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.

[CaroK]

Hi Gabe, vielen Dank erstmal für die ausführliche Antwort. 

Also so wie ich das verstanden habe, wird das reCaptcha von Shopify gestellt und hat standartmäßig die v3 ?

Dementsprechend weiß ich nicht, wo es eingebettet wurde und wo ich deine vorgeschlagenen Veränderung vornehmen kann. 

Da das Theme aktiv ist, kann ich keine Vorschau erstellen, aber hier wäre einmal der Link wo der Fehler passiert: https://bever-naturversand.de/account/login

Vielleicht können wir mit dem ersten Schritt im Detail anfangen. Wo genau kann ich das CSS einfügen?

[Gabe]

@CaroK 

Super danke. Das habe ich jetzt auf Mobile getestet und konnte den reCAPTCHA nicht aktivieren. Siehe meinen Video dazu.

Dann haben wir eine Hilfeseite dazu hier. Das beste was du machen kannst ist das mit den Warehouse Theme Entwickler besprechen hier.

Ich habe das Gefühl dass das nicht so einfach mit einem CSS gelöst werden kann.

VG,

[CaroK]

Ok das ist komisch, reCaptcha ist definiv an und mein Screenshot war gestern erst aufgenommen, also das mit dem abgeschnittenen Bild. Naja, das ist auf jeden Fall ein guter Tipp, jetzt verstehe ich, was damit gemeint ist, man soll mit dem Theme Entwickler sprechen 🙈 Hab sie mal angeschrieben und mal gucken, was zurück kommt 🙂 

[Gabe]

Super und halte uns auf dem Laufenden! 😉

[CaroK]

Hi Gabe, das kam als Antwort: Although I would love to help you with this, the ReCaptcha is 100% controlled by Shopify, so we're unable to help you from the theme's side. To get assistance with it, please reach out to Shopify support directly, and they will be able to help you.

Ähm ok und nu 😥

[Gabe]

Hey @CaroK 

Ok, um dir dabei behilflich zu sein, wird unser Team das 👀 müssen. Hast du bereits ein Ticket bei unserem Support-Team geöffnet? 

Falls nicht, sende bitte eine E-Mail an unseren Support wie hier demonstriert von der E-Mail-Adresse, die du zur Anmeldung in deinem Shopify-Shop verwendest, und gib deine myshopify.com-URL da auch ein. Sobald die dein Konto authentifiziert haben, können sie dir weiterhelfen.

Inkludiere in deinem Ticket an unseren Support alles aus diesem Leitfaden hier samt Bilder.

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