wordpress: Handy-Darstellung Android und iOS unterschiedlich

[msg]

Hallo Kollegen,

ich arbeite an einer Vereinshomepage in wordpress und stehe mit meinem Latein an:
Die Darstellung des Menü-Hamburgers wird in iOS so dargestellt, wie es in der Elementor-Vorschau angezeigt wird, aber ich bekam von der Leiterin zurückgemeldet, dass sie und andere Android-Benutzer das Menü-Symbol nicht finden. Habe daher mein altes Androidhandy startklar gemacht und finde den Hamburger erst nach einem Wisch nach links, also tatsächlich versteckt und für ältere Herrschaften, die sowieso keine Affinität zu Handys haben unmöglich platziert. Getestet habe ich mit Google-Browser und Brave, an beiden ist der Wisch nötig, um zum Menü zu kommen.

hier die iOS- (links) vs. die Android-Version, wo erst ein Wisch erfolgen muss um den grauen Bereich zu sehen und somit auch das Menüsymbol.

Da wordpress ja alleine die Versionen für Tablet, PC und Handy layoutet und in meinen Jahren der wordpress-Aktiviten immer alles gepasst hat, steh ich jetzt an, wo ich etwas umstellen könnte, dass die Android-Version so aussieht wie die iOS-Version.
Ich dachte daran ein extra Menü zu basteln, das unterhalb des Bildes angezeigt wird .. oder gibt es eine elegantere Lösung?

Ich freu mich, wenn ihr etwas dazu zu sagen habt! Liebe Grüße, Sandro

 

[maccoX]

Hi, das hat ja nichts mit Wordpress zu tun, das verwendete Theme taugt nichts, vermutlich ist das auch mit der individuellen Breite vom iOS und Android Gerät abhängig,

 

[msg]

soll ich zuerst mich mit den Parametern für die individuelle Breite beschäftigen od. siehst du sofort, dass das Theme nicht passt?

 

[maccoX]

Gerade die URL im Screenshot entdeckt und kurz geschaut. Bei geringer Displaybreite ist das Mail Feld im Kontaktformular an dem Problem schuld, da ist size=40 eingetragen was das Feld dann zu breit macht und die Seite sprengt.

 

[msg]

danke für die rasche Antwort, ich verwende für das Kontaktformular "Contact Form 7" (PlugIn), da fand ich nirgends Parameter für die Breite!!!
Wo kann ich das bitte einstellen?

 

[maccoX]

Da ich das Plugin nicht nutze kann ich dazu wenig sagen. Musst halt in den Einstellungen für dieses eine Mail Feld schauen ob da nicht doch was ist. Sonst kann man es mit CSS (width: 100%) überschreiben.

 

[Difool]

@msg
Und irgendwie hast du die background-images komisch eingebaut.
Da liegt noch dieses dahinter „moss-4418351_1920.jpg“.

Wenn man sich das Demo ansieht, dann haben die z.B. nicht Elementor verwendet:
https://wp-themes.com/inspiro/

Du hast das background-image mit Elementor reingesetzt – denke, dass da irgendwo was das Layout sprengt.

edit:
Dein Problem existiert nur auf der Startseite.
Kontrolliere deren Aufbau nochmal.
Die Headerbilder nochmal neu anlegen – evtl. nicht über ein Elementor-element.

 

[msg]

das Hintergrundbild hab ich im Rahmen des Customizers des themes ausgewählt. Elementor zeigt es dann an und alles drunter an Text und Medien hab ich dann mit Elementor gebastelt.

 

[Difool]

Und @maccoX hat auch recht.

Setz mal dies in deinen css style dazu:

@media screen and (max-width: 30em) {
.wpcf7-form-control-wrap input { width: 100%; }
}

edit:
Alternativ natürlich auch die Felder beim Mailformular-Plugin kontrollieren.
Da könnte die size=40 Angabe beim eMail-Feld stehen.

 

[msg]

super, vielen lieben Dank, das Einfügen des Codes in die css-Datei hat gefunzt!